프론트엔드 개발을 AI가 도와주는 시대, 우리는 이제 더 이상 “어떻게 만들지?”보다는 “무엇을 만들지?”에 집중하게 됩니다. 그리고 그 중심에는 바로 ‘디자인 감각’이 있습니다.
하지만 막상 디자인을 공부하려고 하면 막막하죠.
“UI? UX? 타이포그래피? 컬러 시스템? 도대체 어디서부터 시작해야 하지?”
그래서 오늘은 디자인 입문자가 어디서부터 시작하면 좋을지, 제가 찾은 방법을 정리해보려고 합니다.
1. 레이아웃 이해하기 — 구조를 먼저 본다
디자인을 처음 공부할 땐 ‘색’이나 ‘글꼴’보다 **레이아웃(구조)**부터 보는 게 좋아요.
- 그리드 시스템: 화면을 나누는 기본 단위. (12-column grid 등)
- Header, Main, Sidebar, Footer 같은 기본 구조 이해
- Figma, Notion, Vercel 홈페이지 등을 보면서 구조를 눈에 익히기
📌 실습 팁: 웹사이트 하나를 골라서, 화면을 직접 종이에 나눠 그려보기
2. 타이포그래피 — 글씨에도 분위기가 있다
글꼴, 글씨 크기, 줄 간격… 이건 단순한 ‘글자’가 아니라 정보의 분위기를 만드는 중요한 요소예요.
- Sans-serif vs Serif의 차이
- 헤더(H1~H3)와 본문(p)의 구분
- 줄 간격(line-height)과 자간(letter-spacing)의 조절
🎯 추천: Type-scale 사이트에서 다양한 타이포 조합을 시각적으로 체험해보기
3. 컬러 조합 — 감각보다는 시스템으로 접근하기
색 조합은 감각도 필요하지만, 처음엔 이론을 알고 시작하면 훨씬 쉽습니다.
- 색상환(Hue Circle) 이해하기
- 보색 / 유사색 / 삼각형 조합 등
- 배경색과 글자색의 명도 대비(Contrast) 확인
🎨 추천 도구:
- Coolors — 자동 컬러 팔레트 생성기
- Color Hunt — 트렌디한 컬러 조합 예시 모음
- Accessible Colors — 접근성까지 고려한 컬러 조합
4. 좋은 디자인을 자주 보기 — 눈이 먼저 익는다
디자인은 눈으로 보는 경험이 쌓여야 감각이 생깁니다. 매일 하나씩 보기만 해도 눈이 트이기 시작해요.
✨ 추천 사이트:
보고, 따라 해보고, 마음에 드는 것들은 스크랩해서 나만의 디자인 라이브러리 만들기!
5. 디자인은 ‘감각’이 아니라 ‘기술’이다
마지막으로 꼭 드리고 싶은 말은 이거예요.
디자인은 ‘감각 있는 사람들’만 하는 게 아닙니다.
기초 이론 + 반복 훈련으로 누구나 배울 수 있어요.
특히 V0처럼 AI가 우리를 도와주는 시대에는, 우리가 상상하고 설명만 잘하면 프론트엔드는 AI가 해줍니다. 그만큼, ‘디자인을 보는 눈’은 AI와 협업하는 시대의 새로운 언어가 됩니다.
다음 편 예고
다음 글에서는 요즘 가장 많이 보이는 디자인 트렌드들을 한눈에 정리해보려고 해요.
- 글래스모피즘
- 뉴모피즘
- 브루탈리즘
- 미니멀리즘
요즘 디자이너들은 왜 이런 스타일을 쓰는 걸까?
그리고 우리도 이걸 자연어로 설명하면 V0에서 어떻게 구현될까?
궁금하다면 다음 편도 기대해주세요! 🙌
