사람은 적응의 동물이라고 하죠.
디자인 툴을 8년 넘게 써오다 보니, 이제는 손이 먼저 움직입니다. 생각하지 않아도 마우스가 원하는 대로 움직여주고, 화면 위에 원하는 걸 그려줍니다. 그런데 이제 와서 코딩을 시작하려니, 다시 '생각'이 필요해졌습니다.
익숙한 도구를 벗어나 낯선 환경에 들어선 기분이에요. 코딩이라는 낯선 세계에 적응하려면, 그만큼의 시간과 노력이 들어가겠죠. 사실 디자인 툴의 편안함이 자꾸 떠오르니, 코딩이 괜히 어렵고 거리감이 느껴지기도 해요. 아마 개발자분들도 디자인 툴을 볼 때 비슷한 기분이겠죠?
하지만 이건 내가 선택한 길이니까, 스스로 다그쳐봅니다.
HTML – 빈 화면 앞에서 멈춘 디자이너
처음 Visual Studio Code를 실행하고 HTML 파일을 생성했을 때, 가장 먼저 든 생각은:
“왜 아무것도 없지…?”
정말, 파일을 만들었는데 화면이 텅 비어 있었고, 어디서부터 뭘 해야 하는 건지 막막했습니다. 비전공자라면 공감하실 텐데요—미리 알려드릴게요. 이 빈 화면에서 거의 모든 걸 '타자'로 입력해야 합니다. 그걸 알게 된 순간, 전 속으로 외쳤어요:
"아… 디자인 툴이 진짜 개꿀이었구나…"
코딩을 배우기로 마음먹은 디자이너분들(혹은 비전공자분들), 이것만은 꼭 기억하세요:
디자인 툴에서 클릭하고 드래그하던 모든 동작은, 이제 <태그>를 타이핑해서 하나하나 구현해야 한다는 것.
(*그래도 단축키와 자동 완성 기능이 꽤 잘 되어 있으니, 조금은 안심해도 돼요.*)
1. Index.html – 웹의 첫인상, 홈 화면 만들기
index.html은 전통적으로 웹사이트의 시작점, 즉 홈 화면이 되는 파일입니다. 디자인 용어로는 ‘랜딩 페이지’나 ‘메인 화면’ 정도로 생각하시면 됩니다. 웹 서버는 특정 경로에 대한 요청을 받으면, 가장 먼저 index.html을 찾는다고 해요.
즉, 웹에서 처음 열리는 화면을 담당하는 파일이죠.
대부분의 개발자들이 이 규칙을 따르고 있기 때문에, 협업을 위해서라도 꼭 기억해 두는 게 좋습니다.
2. <!DOCTYPE html> – “그냥 쓰는 거 아냐?”의 정체
회사 다닐 때, 프론트엔드 개발자 한 분을 꼬셔서 디자이너 대상 HTML 스터디를 연 적이 있었어요. 근데 전 이 한 줄에서 멈췄습니다.
“이게 도대체 뭐야…?”
초심자의 패기인가 이게 무엇인지 알수없으니 더 진행할 생각을 못하겠더군요. 그래서 스터디를 맡아준 개발자에게 “DOCTYPE가 뭐야?” “lang은 뭐야?” “meta는 뭐야?” 질문이 꼬리에 꼬리를 물더니, 결국 그분은 이렇게 말했죠.
“그냥 써.”
교안에는 ‘<!DOCTYPE html>은 HTML Living Standard 문서라는 의미의 선언문이다. 이 선언문을 통해 브라우저가 어떤 모드로 페이지를 렌더링할지 결정하며, 작성시 완전 표준 모드로 렌더링 됩니다.’ 라고 설명하고 있습니다. 이 얼마나 명쾌한 대답인가요?
나중에 그 개발자를 만나면 꿀밤을 한대 먹여줘야 할 것 같습니다.
만약 DOCTYPE을 제거하면 브라우저가 오래된 웹으로 간주하고 쿼크 모드(quirks mode : 하위 호환성 모드)로 렌더링합니다. 그러면 레이아웃이나 스타일에 문제가 발생할 수 있으니 주의 해야합니다. 때문에 DOCTYPE는 항상 문서 최상위에 선언합니다. 디자이너분들 엉망이된 디자인 보고 눈 아프기 싫으면 꼭 기억하세요.
DOCTYPE은 무조건 문서 맨 위에 써야 합니다.
3. <html> – 웹 문서의 아트보드
HTML 문서의 루트이며 상위 태그입니다.
(참고로 <></>를 통해 작성되는 단어 단위의 텍스트를 태그라고 합니다. 전 처음 시작할때 태그가 뭔지도 몰라서 한참 찾았던 기억이 있어서..)
디자이너가 쉽게 이해할 수 있는 방법으로 설명하자면 위의 이미지와 같은 ‘창’이 <html> 태그라고 이해하면 됩니다. 디자인 툴에서 아트보드의 크기, 경로, 파일명 그리고 속성 등을 설정하고 파일을 생성하는 것과 동일한 행위를 타자를 통해 <html> 이 사이에 </html> 태그에 작성하는 것입다. lang
‘lang’ 속성을 통해 언어를 설정할 수 있습니다. 언어마다 기본으로 설정되어 있는 서체가 다른데, 맥의 경우 en으로 그대로 두고 한글을 작성하면 특정 서체를 지정하지 않았을 때 한글이 궁서체로 나타나기도 하니 주의 해야합니다. 생각만해도 불편하죠? 폰트 깨져서 궁서체로 나타는 상황과 동일합니다. 디자이너 입장에선 공포 그 자체죠. (예, 저도 겪어봤어요…)
4. <head> – 숨겨진 설정창
만약 처음 html을 접한 디자이너가 있다면 꼭 이야기해주고 싶은게 있었어요!
"아직 우리 파일도 못 연거야"
이건 사용자에겐 보이지 않지만, 웹 문서의 핵심 정보를 담는 공간입니다.
브라우저가 문서를 어떻게 해석할지, 어떤 스타일을 입힐지, 어떤 스크립트를 사용할지 등을 설정하죠.
디자인 툴에서 '파일 설정창' 같은 느낌이에요. 여기서 설정하는 정보는 다음과 같아요:
- 문자 인코딩 (
charset) - 브라우저 호환성 (
X-UA-Compatible) - 설명 (
description) - 뷰포트 (
viewport) - 제목 (
title) - 파비콘, 외부 CSS 파일 등 (
link)
5. <meta> – 폰트 깨짐과 뷰포트의 열쇠
메타 데이터는 “데이터를 설명하는 데이터”입니다.
웹 페이지의 언어, 뷰포트 설정, 인코딩 등을 설정해서 사용자와 기계 모두가 웹을 잘 읽을 수 있게 도와줘요.
디자이너가 민감하게 반응하는 이슈들—글자 깨짐, 디자인 레이아웃 틀어짐—전부 여기서 제어할 수 있습니다.
예시:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="간단한 설명 텍스트" />6. <title> – 페이지의 이름표
브라우저 탭에 표시되는 문서 제목입니다. 의외로 신경 안 쓰는 분들 많지만, 이건 브랜드의 첫인상이기도 해요.
특수문자는 넣지 않고 간결하게 작성하는 게 좋습니다.
7. <link> – CSS와의 연결고리
외부 파일과 연결해주는 태그입니다. 대부분 CSS, 폰트, 파비콘 등을 연결할 때 사용해요.
디자이너가 직접적으로 작업하는 사항들은 대부분 css 파일에 작성하게 됩니다. 폰트, 색상, 레이아웃, 형태 등 figma를 기준으로 좌측 인터페이스에서 설정할 수 있는 값은 90% css에서 작성하게 됩니다.
(figma를 기준으로 우측 인터페이스의 ’layers’의 정보가 html에서 작성되고, ‘pages’에서 나누어진 디자인 시스템을 각각 css 파일로 작성한다고 생각할 수 있습니다.)
자 이제 여러분은 파일을 생성해서 위의 이미지와 같은 화면에 진입했습니다. 어떤가요? 디자인툴에서 클릭 몇번으로 생성할 수 있는 화면이 개발환경에서 접근하니 굉장히 복잡하죠? 사실 지금까지 설명한 사항들은 저와 같은 생초보에게만 어려운 사항이에요. 실제 프론트엔드 개발이 전공인 사람들은 우리가 클릭 몇번으로 파일을 생성하는 것과 동일한 수준으로 쉽게 파일을 생성합니다. 뭐든지 반복 숙달이 참 중요하죠. 이런걸 보면 디자이너와 개발자도 생산직으로 볼 수 있지 않을까요?
8. <body> – 드디어 보이는 것들
드디어 우리가 사용자에게 보여줄 내용을 작성하는 공간입니다. 디자인 툴로 말하면, 아트보드(Figma는 Frame) 위에 실제 디자인을 시작하는 거죠. <body> 안에는 텍스트, 이미지, 버튼, 레이아웃 등 화면에 보이는 모든 요소들이 들어갑니다.
물론 디자인 툴처럼 클릭 몇 번으로 되진 않겠지만요…
마치며 – 디자이너의 감각에서 코드의 질서로
지금까지 설명한 내용은, 사실 개발자에게는 너무나 기본적인 내용입니다. 하지만 저처럼 처음 시작한 디자이너에겐 진입장벽이 정말 높게 느껴졌어요. 마우스 몇 번으로 되던 작업이 이제는 타자와 논리의 싸움으로 바뀌었고, 그 과정에서 깨달았어요—
“아, 나 진짜 감각만으로 디자인했었구나.”
전 사실 다른 css나 js를 학습할 때 느낀 것보다 HTML 문법과 태그에 대해 공부하면서 생각하고 느낀 점이 많았던거 같아요.
다음 글에서는 실제 HTML 태그와 문법을 다루면서, 제가 느낀 점들을 더 풀어보려고 해요. 저처럼 디자인을 하다가 코딩에 발을 들인 분들에게 조금이라도 도움이 되면 좋겠습니다. 그럼, 다음 글에서 뵐게요!
'Design & Front-end' 카테고리의 다른 글
| 디자이너가 알아두면 좋은 코딩 입문 개념 정리 (5) | 2025.06.10 |
|---|---|
| 8년 차 UX 디자이너, 왜 프론트엔드를 배우기 시작했을까? (3) | 2025.06.05 |