2013년 여름, 제가 웹 에이전시에서 퍼블리싱 팀장으로 일할 때였습니다. 갓 입사한 신입 디자이너가 울상을 지으며 제게 찾아왔습니다. “팀장님, 제가 디자인한 건 텍스트가 이미지 위에 올라가 있는데, 코딩된 페이지에선 자꾸 아래로 떨어져요.”
저는 그 친구의 모니터 화면(포토샵)과 제 모니터 화면(VS Code)을 나란히 두고 말했습니다. “포토샵 레이어 패널에서 폴더를 접었다 폈다 하시죠? 코딩도 똑같아요. 단지 마우스로 드래그하느냐, 타자로 치느냐의 차이일 뿐입니다.” 그날 이후 그 친구는 HTML 구조를 기가 막히게 짜는 ‘코딩하는 디자이너’로 성장했습니다. 오늘 다룰 이야기는 바로 이 ‘디지털 샌드위치 쌓기’에 대한 이야기입니다.
1. 겹침의 미학: 위로 쌓느냐, 아래로 쌓느냐
포토샵을 켜면 가장 먼저 하는 일이 무엇인가요? 배경을 깔고, 그 위에 인물을 얹고, 다시 그 위에 텍스트를 얹습니다. 투명한 셀로판지를 겹겹이 쌓는 것과 같죠. HTML의 <div> 태그도 본질적으로 똑같습니다.
코드를 한 줄씩 짤 때마다 웹 브라우저는 바닥에서부터 블록을 쌓아 올립니다. 포토샵의 레이어 패널에서 ‘가장 위에 있는 레이어’가 화면에서 제일 잘 보이는 것처럼, HTML에서도 (일반적으로) ‘가장 나중에 작성된 코드’가 화면의 맨 위에 올라옵니다.
“솔직히 고백하자면, 저도 처음엔 z-index 속성을 남발했습니다. 레이어가 꼬이면 무조건 9999를 입력했죠. 하지만 포토샵에서 ‘레이어 순서’만 잘 정렬하면 굳이 복잡한 설정이 필요 없듯, HTML 코드 순서(DOM Order)만 잘 설계해도 디자인이 훨씬 깔끔해진다는 걸 뒤늦게 깨달았습니다.”
2. 그룹(Group)과 부모 요소(Parent Container)
포토샵 고수들의 PSD 파일을 열어보면 공통점이 있습니다. 레이어들이 Header, Contents, Footer라는 폴더(Group) 안에 아주 예쁘게 정리되어 있다는 점입니다. 폴더를 움직이면 그 안의 모든 레이어가 같이 움직이죠.
HTML의 Div도 마찬가지입니다. 우리는 이것을 ‘감싼다(Wrapping)’라고 표현합니다.
- ✅ 포토샵 그룹(Ctrl+G): 여러 레이어를 묶어서 한 번에 이동하거나 숨길 때 사용합니다.
- ✅ HTML 부모 Div: 자식 요소들을 묶어서 정렬(Flex/Grid)하거나 구획을 나눌 때 사용합니다.
즉, 포토샵에서 “그룹을 짓는다”는 행위는 개발자에게 “이 부분은 하나의 큰 <div> 박스로 감싸주세요”라고 말하는 것과 같습니다.
💡 코드캠의 실전 TIP
레이어 이름 짓기(Naming)를 귀찮아하지 마세요. 포토샵의 ‘Layer 1, Layer 1 copy’는 개발자에게 지옥입니다. 레이어 이름을 ‘btn_submit’이라고 지어주는 습관은 곧 HTML의 class="btn_submit"이 됩니다. 디자인 단계에서의 네이밍이 코딩 시간을 절반으로 줄여줍니다.
3. 결정적 차이: 유령과 벽돌
소름 돋게 똑같아 보이지만, 결정적인 차이 하나를 모르면 코딩할 때 좌절하게 됩니다.
포토샵의 레이어는 ‘유령’ 같습니다. 겹쳐도 서로 밀어내지 않습니다. 그냥 위에 둥둥 떠 있죠. 반면, HTML의 Div(기본 상태)는 ‘벽돌’입니다. 아무런 조치를 취하지 않으면, 박스들은 서로 겹치지 않고 위아래로 층층이 쌓이며 서로를 밀어냅니다.
그래서 개발자들은 position: absolute(절대 좌표) 같은 마법을 써서 Div를 포토샵 레이어처럼 ‘유령’으로 만들기도 합니다. 이 차이를 이해하는 것이 웹 퍼블리싱의 시작입니다.
마치며
결국 디자인과 코딩은 ‘정보를 쌓아 올리는 건축’이라는 점에서 한 몸입니다. 포토샵 레이어를 잘 다루는 분이라면, 이미 웹 코딩을 잘할 수 있는 공간 지각 능력을 갖춘 셈입니다.
이제 포토샵에서 레이어 하나를 만들 때마다 상상해 보세요. “아, 나는 지금 <div> 태그 하나를 생성했구나.” 이 작은 생각의 전환이 여러분을 단순 그래픽 디자이너에서 ‘웹을 이해하는 크리에이터’로 만들어 줄 것입니다.
레이어 구조를 이해했다면, 실제 실무에서 웹사이트가 만들어지는 전체 흐름이 궁금하실 겁니다. 기획부터 디자인, 코딩까지의 단계는 웹 디자인 프로세스 완벽 정리를 참고해 보세요.
혹시 레이어와 Div 개념을 매칭하다가 헷갈리는 부분이 있으신가요? 포토샵 화면 캡처와 함께 질문 주시면 개발자의 시선으로 해석해 드리겠습니다!
