2017년 추운 겨울이었던 걸로 기억합니다. 꽤 규모가 큰 포트폴리오 사이트 제작 의뢰를 받았었죠. 의욕만 앞선 저는 기획서도 제대로 안 보고 바로 VS Code를 켜서 <div> 태그부터 적어 내려갔습니다. 버튼 하나를 예쁘게 만드는 데 4시간을 썼는데, 정작 그 버튼이 들어갈 전체 메뉴 위치가 결정되지 않았다는 걸 깨달았을 때의 그 허망함이란…
결국 그날 밤을 꼬박 새워 작업했던 코드를 전부 지워버렸습니다. 그때 깨달았죠. 웹사이트를 만드는 건 집을 짓거나 영화를 찍는 것과 똑같다는 것을요. ‘콘티’ 없는 코딩은 밑 빠진 독에 물 붓기였습니다. 오늘 여러분께는 제가 그날 이후로 단 한 번도 실패하지 않았던 ‘웹 레이아웃 설계 공식’을 알려드리겠습니다.
1. 기획(콘티): 종이와 연필로 시작하는 ‘와이어프레임’
영상 제작에서 촬영 전 ‘콘티’를 짜듯, 웹에서도 코딩 전 와이어프레임이 필요합니다. “여기엔 로고를 넣고, 여기엔 영상이 나와야지”라고 영역을 나누는 과정이죠.
“저는 지금도 복잡한 레이아웃을 잡을 때면 모니터를 끄고 이면지를 꺼냅니다. 손으로 네모 박스를 그려보지 않으면 머릿속에서 축(Axis)이 꼬여버리거든요. 이 5분의 스케치가 나중에 5시간의 디버깅을 막아줍니다.”
이 단계에서 중요한 건 ‘색상’이나 ‘폰트’가 아닙니다. ‘사용자의 시선이 어디로 흐를 것인가’라는 시나리오를 짜는 데 집중해야 합니다.
2. 구조(HTML): 뼈대를 세우는 ‘가편집’ 단계
콘티가 나왔다면 이제 촬영본을 순서대로 나열하는 ‘가편집’에 들어갈 차례입니다. 웹에서는 이게 바로 HTML 작업이죠.
- ✅ 의미 있는 태그(Semantic): 단순히
div만 쓰지 말고header,main,footer로 이름표를 붙여주세요. - ✅ 순서의 미학: 영상이 앞뒤 맥락이 맞아야 하듯, HTML도 위에서 아래로 논리적인 흐름을 가져야 합니다.
이때 주의할 점! 디자인 요소를 넣고 싶은 유혹을 참아야 합니다. 뼈대만 봐도 어떤 사이트인지 알 수 있다면 성공입니다.
💡 코드캠의 실전 TIP
많은 분들이 HTML을 짜면서 동시에 CSS 색상을 입히려고 합니다. 하지만 이건 마치 배우가 대사 연습도 안 했는데 분장부터 하는 것과 같습니다. HTML로 뼈대만 완벽하게 잡으세요. 디자인은 그 뒤에 해도 늦지 않습니다.
3. 디자인(CSS): 색을 입히고 연출하는 ‘후반 작업’
영상에 필터를 입히고 화려한 CG를 넣는 과정이 바로 CSS입니다. 우리가 아까 배운 Flexbox나 Grid를 활용해 뼈대에 근육을 붙이고 위치를 정교하게 조정하는 작업이죠.
이 단계에서는 사용자의 기기(모바일, PC)에 따라 화면이 어떻게 변할지를 고민하는 ‘반응형 연출’이 핵심입니다. 영상으로 치면 극장판과 모바일판을 동시에 만드는 셈이죠.
마치며
웹사이트 레이아웃은 결국 [생각하기 → 뼈대 잡기 → 예쁘게 만들기]의 반복입니다. 이 순서만 지켜도 여러분의 코딩 속도는 비약적으로 빨라질 겁니다.
혹시 지금 만들고 있는 레이아웃이 자꾸 틀어지나요?
어디서부터 꼬였는지 막막하다면 댓글로 상황을 설명해 주세요. 제가 ‘콘티’부터 다시 봐드리겠습니다!
