brunch
매거진 UXUI 실무

디자이너를 위한 HTML·CSS 실무 지식 - 0화

디자이너를 위한 HTML 문서 읽기

by 김태길
Nov 5. 2025

연재를 시작하며

디자이너가 코드를 알아야 하는지, 디자이너가 개발도 해야 하는지, 심지어는 디자이너가 퍼블리싱을 어느정도 해야 하는지 업계에 혼란이 너무 많다. 그래서 기왕 이렇게 된 거, 디자이너가 코드 구조를 이해했을 때 생기는 장점과 어떤 걸 알아야 협업 및 디자인 역량 강화에 도움이 될 지 실무적인 관점으로 분석한 내용을 4편에 걸쳐서 소개해보고자 한다.

디자이너 관점에서 분석한 내용들이 많다보니 정확하지 않은 개발 이야기가 있을 수 있다. 만약 다르거나 고쳐야 하는 부분이 있다면 언제든지 댓글로 알려주시라.




디자이너가 코드를 이해해야 하는 이유


img_sem_elements.gif


이 시리즈는 디자이너가 반드시 개발자가 되어야 한다는 전제를 두지 않는다. 다만, 제품이 브라우저 안에서 어떻게 구조화되고 표시되는지를 이해하는 것은 디자인의 품질과 협업의 효율 모두에 직접적인 영향을 미친다. HTML과 CSS는 단순히 개발 언어가 아니라, 디자인이 화면 위에서 ‘작동’하기 위한 최소한의 구조와 표현 규칙이다. 피그마 안에서 완성된 화면이 실제로 어떻게 해석되고, 그 구조가 브라우저에서 어떤 제약과 원리로 구현되는지를 이해하면 디자이너는 더 적은 시행착오로, 더 정확한 의사결정을 내릴 수 있다.


그런 의미에서 준비한 디자이너를 위한 개발 가이드 시리즈가 되겠다. 이 시리즈는 총 네 편으로 구성된다. 지금 보고 계신 이 문서는 시리즈를 본격적으로 시작하기 전에 맛보기로 읽을 수 있는 0번째 편이자 프롤로그다.


0화 - HTML 문서를 읽는 법
디자이너가 처음 HTML을 볼 때 막히는 지점을 풀어주고, 태그와 구조를 피그마의 시각 언어로 대응시켜 설명한다.
1화 - 구조를 이해하는 디자이너는 전달력이 다르다
HTML의 시맨틱 구조와 의미 계층이 디자인 협업에 어떤 차이를 만드는지 다룬다.
2화 — 표현의 한계를 이해한다: CSS의 원리와 구조
: 레이아웃, 반응형, 성능 제약 등 브라우저가 디자인을 ‘그리는 방식’을 설명한다.
3화 — 브라우저 안에서 디자인이 완성되는 과정
: 렌더링, DOM 업데이트, 리플로우 같은 내부 원리를 디자이너의 언어로 정리한다.


이 시리즈의 목표는 코드를 ‘작성하는 법’을 배우는 것이 아니라, 코드가 디자인을 어떻게 해석하는지를 이해하는 것이다. HTML과 CSS의 기본 원리를 알면, 피그마의 구조 설계부터 개발 전달까지 모든 과정에서 판단 기준이 명확해질 수 있다.

original.png @ Semrush




디자이너가

처음 HTML을 볼 때 생기는 문제


1*Zdcpe1oOwoVUgC-oggCASw.jpeg https://medium.com/@odunzechidubem73/html-semantics-explained-1f09f2ef2c94


피그마로 만든 화면은 명확하다. 박스가 있고, 안에 텍스트와 아이콘이 있다. 계층 패널에서 Group과 Frame이 구분되기 때문에 ‘무엇이 안에 있고 무엇이 바깥에 있는지’를 쉽게 알 수 있다. 하지만 HTML 문서를 열면 태그(tag)라고 불리는 괄호들이 줄줄이 이어진다. <div>, <section>, <p>, <h1> 같은 단어들은 시각적으로는 아무 정보도 주지 않는다.


이 때문에 많은 디자이너가 HTML을 처음 볼 때 막연한 거부감을 느낀다. 브라우저는 바로 이 구조를 읽어 화면을 만든다. 디자이너가 화면을 ‘그리는’ 동안, 브라우저는 HTML을 ‘해석해 구조화’한다. 따라서 HTML을 이해한다는 건 새로운 기술을 배우는 일이 아니라, 브라우저가 디자인을 해석하는 방식을 이해하는 일에 가깝다. 그 해석의 과정과 디자이너가 알아야 하는 부분을 소개해본다.



1. HTML 문서는 ‘열고 닫는 상자’로 되어 있다


HTML의 기본 구조는 단순하다. 모든 HTML 문서는 <html> 로 시작해 </html> 로 끝난다.


이 안에는 <head>(정보 설정 부분)와 <body>(실제 화면에 보이는 부분)가 들어 있다. 각각의 태그는 대부분 한 쌍으로 존재한다. 여는 태그(<div>)는 시작을, 닫는 태그(</div>)는 끝을 의미한다. 즉, 한번 태그를 열어서 그 안에 내용을 작성하면 닫아야 코드가 완성된다. 이 한 쌍에 초점을 두고 html을 보면 어느정도 구조를 파악하기 더 쉽다.


이 두 태그 사이에 들어 있는 내용이 하나의 박스, 즉 요소(element)다. 이렇게 박스 안에 박스가 중첩되며 페이지 전체가 구성된다.

carbon (4).png


이 짧은 예시를 피그마로 옮겨보면 Frame 하나 안에 텍스트 두 개(제목, 본문)가 들어 있는 구조다. 즉,

<div>는 Frame, <h2>는 타이틀 텍스트, <p>는 본문 텍스트다. 피그마에서 Frame이 화면의 관계를 정의하듯 HTML에서는 여는 태그와 닫는 태그가 관계를 정의한다.



2. HTML을 읽는 방법 : 들여쓰기를 기준으로 구조를 본다


HTML을 읽을 때 중요한 건 들여쓰기(indent)다. 들여쓰기는 부모‑자식 관계를 시각적으로 표현한다.

carbon (5).png


여기서 <section>은 <div> 안에 있으므로 <div>의 자식 요소, <h1>과 <p>는 <section>의 자식 요소다. 이 관계를 이해하면 HTML을 읽는 것이 한결 쉬워질 수 있다. 피그마의 레이어 패널에서 어떤 요소가 어떤 프레임에 속해 있는지를 보는 것과 동일하다. 디자이너가 HTML을 해석할 때는 '지금 보고 있는 태그가 어떤 상자 안에 있고, 어떤 상자를 감싸고 있는가'를 보는 게 핵심이다. 이 구조를 파악하면, 실제 레이아웃이 어떻게 쌓이는지를 예측할 수 있다.



3. DOM : 브라우저의 내부 지도


브라우저는 HTML 문서를 그대로 그리지 않는다. HTML을 읽은 뒤, 그 내용을 들여쓰기와 여닫는 상자 구조로 만들어진 트리(Tree) 형태의 구조로 바꾸어 브라우저의 자체 메모리에 임시로 저장한다. 이 나무 형태의 구조물을 DOM(Document Object Model) 이라고 부른다. 쉽게 말해 HTML 문서는 DOM 이라고 부를 수 있다.

html_dom.jpg https://www.tutorialspoint.com/html/html_dom.htm


DOM은 브라우저가 인식하는 ‘화면의 구조적 지도’다. 각 요소는 연결점이라는 뜻의 노드(node)라고 부를 수 있으며, 부모 요소, 자식 요소, 형제 요소는 모두 노드로 연결되어 있다. 이 노드들이 트리 형태로 가지를 뻗는 것이다. 개발자 도구의 Elements 탭을 열면 이 DOM 구조를 그대로 볼 수 있다. 또한 태그를 클릭하면 화면의 어느 부분이 해당되는지도 함께 표시된다. 디자이너에게 이 구조는 피그마의 레이어 패널과 거의 동일한 개념이다. HTML은 피그마의 프레임 구조를 코드로 표현한 버전이고, DOM은 그 구조가 브라우저 안에서 ‘실행 중인 상태’라고 볼 수 있다.



4. 태그(tag)의 역할을 구분해서 읽는다


HTML에는 수백 가지의 태그(tag)가 있지만, 디자이너가 실제로 자주 마주치는 건 그중 일부다. 태그란 HTML 문서에서 하나의 영역이나 요소를 정의하는 표식으로, 브라우저가 '이 부분은 제목이다', '이건 문단이다'처럼 화면의 구조를 이해하도록 돕는 역할을 한다. 이때 태그는 단순히 화면의 모양을 지정하는 도구가 아니라, 콘텐츠의 의미를 설명하는 언어적 단위다.


그중에서도 시맨틱 태그(semantic tag)는 태그 이름 자체가 그 요소의 의미를 명확히 드러내는 태그를 말한다. 예를 들어 <header>는 페이지의 머리말, <nav>는 내비게이션, <main>은 주요 콘텐츠, <section>은 주제별 구획, <article>은 독립된 콘텐츠 단위를 의미한다. 이런 태그들은 단순히 코드상 구조를 구분하는 용도를 넘어, 브라우저·검색엔진·보조기술이 문서를 더 정확히 해석하도록 돕는 역할을 한다.

I7EG0-.png 시맨틱 태그의 대표적인 유형들.


디자이너가 HTML을 읽을 때는 이 시맨틱 태그들이 어떤 의미적 역할을 갖는지를 중심으로 보는 것이 좋다. 즉, <section>을 보면 '이건 페이지의 한 구획이구나', <article>을 보면 '이건 반복되는 카드 아이템이구나', <nav>를 보면 '이건 탐색 구조를 담당하는 영역이구나' 정도로 해석하면 충분하다. 태그를 이렇게 ‘의미의 언어’로 읽는 습관이 생기면, 피그마에서 설계할 때도 어떤 영역이 독립적인 콘텐츠 단위인지, 어떤 영역이 문서 구조상 보조 역할을 하는지를 자연스럽게 구분할 수 있다..



6. HTML을 피그마 구조로 대응해 보기


피그마에서 다음과 같은 구조를 만든다고 가정하자.

Frame (Page)
　- Frame (Header)
　　- Logo / Navigation
　- Frame (Main)
　　- Title / Card List
　- Frame (Footer)


이걸 HTML로 표현하면 다음과 같다.

carbon (6).png


즉, 피그마의 Frame이 <div> 또는 <section> 으로, 텍스트 레이어가 <h1>이나 <p> 로 바뀌는 정도의 대응 관계다. 디자이너 입장에서는 'HTML을 그리는 게 아니라, HTML이 피그마의 구조를 코드로 설명하는 언어다' 정도로 이해하면 충분하다.



7. 브라우저는 HTML을 겹겹이 쌓는다


1*pBPPK_ZIS2KTRCvGVs2Q1g.png https://medium.com/@tairataderonkefadare/css-box-model-and-display-positioning-debfd0e0a730


이 부분이 사실 디자이너들이 가장 이해를 어려워 하는 부분이다. 피그마나 포토샵 같은 디자인 도구는 레이어를 사용해서 배치하기 때문에 배치가 자유롭고 위, 아래, 수직 높이까지도 자유롭게 조정할 수 있다. 하지만 브라우저는 HTML 구조를 읽고, 각 요소를 상단에서부터 아래로 순차적으로 쌓아 내려가면서 그린다. 이때 겹치는 부분은 CSS를 통해 배치가 조정되지만, 기본 원리는 위에서 아래로, 부모 안에서 자식으로다. 따라서 디자이너가 HTML을 이해하면 화면이 쌓이는 순서와 레이어 관계를 예측할 수 있다. 예를 들어 z-index, overflow, position 같은 CSS 속성을 몰라도, '부모 안의 자식은 부모보다 위에 보인다'는 개념을 알면 충분히 구조를 추론할 수 있다.



8. 정리 : HTML을 ‘그리기’보다는 ‘읽기’


디자이너에게 HTML 학습의 목적은 코드를 작성하는 것이 아니다. HTML을 읽을 줄 아는 사람은 브라우저가 어떻게 디자인을 해석하고 조합하는지를 이해한다. 이 구조 이해가 쌓이면, 피그마에서의 설계 방식도 자연스럽게 달라진다. 결국 디자이너가 HTML을 읽는다는 건 코드를 배우는 게 아니라 화면의 논리 구조를 시각적으로 해석하는 능력을 확장하는 일이다. 이 시리즈에서는 해석의 능력을 키울 수 있는 도움닫기를 제공할 예정이다.


다음 시리즈 예고: 구조를 이해하는 디자이너로 나아가기

HTML 문서를 읽는 법을 이해했다면 이제 화면의 ‘언어’를 읽을 준비가 된 것이다. 피그마 안에서 다루던 Frame과 Text가 브라우저 안에서는 <div>, <section>, <h1> 로 치환되어 작동한다는 사실을 인식하는 순간, 디자인은 단순히 시각을 구성하는 일이 아니라 구조를 설계하는 일로 확장된다. 다음 글에서는 이 구조적 이해가 실제 협업에서 어떤 의미를 가지는지, 그리고 왜 시맨틱 태그가 ‘정보 전달의 질’을 바꾸는지를 다룬다. 디자이너가 HTML을 아는 이유, 그리고 그것이 디자인의 완성도와 팀의 효율을 동시에 높이는 이유를 구체적인 예시와 함께 살펴본다.
keyword