코드 치기 전에 디자인부터 — 개발자를 위한 웹 디자인 생존기

개발자에게 디자인을 맡기면 어떻게 될까요?

높은 확률로 회색 배경에 파란색 링크, 그리고 Bootstrap 기본 테마가 탄생합니다.

저도 그랬습니다. 코드를 먼저 치고, 디자인은 나중에 생각하자는 식으로 접근했더니 결과물은 항상 “기능은 되는데 못생긴” 사이트였습니다. 이번에는 다르게 해보기로 했습니다. 코드를 한 줄도 치지 않고, 디자인부터 끝내자.

개발자도 디자인을 해야 하는 이유

“디자이너가 아닌데 왜?” 라고 생각할 수 있습니다. 하지만 개인 프로젝트에서 디자이너는 당신 자신입니다. 그리고 솔직히 말하면, 개발자 포트폴리오나 블로그의 첫인상은 코드가 아니라 비주얼이 결정합니다.

아무리 뛰어난 프로젝트를 만들었어도, 그것을 보여주는 페이지가 허접하면 — 방문자의 판단은 3초 안에 끝납니다.

getdesign.md 로 디자인 영감 잡기

getdesign.md 는 디자인 레퍼런스를 모아둔 사이트입니다. 저는 여기서 에디토리얼 스타일의 레이아웃을 찾는 데 집중했습니다. 포트폴리오 사이트, 개인 블로그, 타이포그래피 중심 웹사이트들을 훑으며 몇 가지 패턴을 발견했습니다.

인상 깊었던 디자인 패턴들:

• 모노크롬 색상 + 강렬한 타이포그래피
• 넉넉한 여백 (Whitespace) 이 주는 고급감
• 그리드 기반의 정보 배치
• 마우스 호버 시 미세한 인터랙션

디자인 감각이 없어도 괜찮습니다. 중요한 건 좋은 레퍼런스를 충분히 보는 것입니다. 보는 눈이 생기면, 만드는 손이 따라옵니다.

나만의 디자인 시스템 세우기

레퍼런스를 충분히 봤으면, 이제 결정할 것들이 있습니다.

1. 색상 — 욕심부리지 않기

저는 모노크롬(흑백)을 기본으로, 악센트 컬러 하나만 추가했습니다. 색상이 적을수록 실패 확률이 줄어듭니다. 개발자가 색을 많이 쓰면 십중팔구 눈이 아픈 결과물이 나옵니다.

:root {
  --color-bg: #fafafa;
  --color-text: #1a1a1a;
  --color-muted: #6b6b6b;
  --color-border: #e5e5e5;
  --color-accent: #2563eb;  /* 딱 하나만 */
}

2. 타이포그래피 — 폰트가 분위기의 80%를 결정한다

저는 본문에 프리텐다드(Pretendard), 제목에 커스텀 디스플레이 폰트를 사용했습니다. Google Fonts에서 무료로 쓸 수 있는 좋은 폰트가 많습니다 — Inter, Noto Sans KR, Pretendard 등. 중요한 건 두 가지 이하로 제한하는 것입니다.

3. 여백 — 비우는 용기

초보자일수록 빈 공간을 채우고 싶어합니다. 하지만 좋은 디자인의 비밀은 비우는 것입니다. 섹션 사이에 충분한 padding을 주고, 텍스트 줄 사이에 넉넉한 line-height를 주면 — 그것만으로도 프로페셔널한 느낌이 납니다.

body {
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

레이아웃 스케치

Figma를 쓸 줄 아시면 좋지만, 몰라도 됩니다. 저는 A4 종이 한 장에 볼펜으로 대충 그렸습니다. 진짜 대충요.

맨 위에 이름이랑 한 줄 소개가 크게 들어가고, 스크롤 내리면 프로젝트 카드가 2열 그리드로 깔리고, 그 아래 블로그 글 목록, 맨 아래에 이메일이랑 깃허브 링크. 끝입니다. 종이에 그리는 데 3분도 안 걸렸습니다.

완벽한 시안을 만들려고 Figma랑 씨름하다가 3일 날리는 것보다, 이렇게 방향만 잡고 바로 코드를 치는 게 훨씬 빠릅니다. 어차피 브라우저에서 실시간으로 보면서 “이건 좀 아닌데” 하면서 고치게 되거든요. CSS는 그게 가능한 최고의 디자인 도구입니다.

자주 하는 실수들

1. 폰트를 너무 많이 쓴다 → 2개 이하로 제한하세요
2. 색을 너무 많이 쓴다 → 모노크롬 + 악센트 1개로 시작하세요
3. 여백이 부족하다 → 적당하다 싶으면 2배로 늘리세요
4. 반응형을 나중으로 미룬다 → 모바일 퍼스트로 시작하세요
5. 다른 사이트를 그대로 베낀다 → 패턴을 배우되 자기 것으로 재해석하세요

정리

디자인에 자신이 없는 개발자라면 이 순서를 추천합니다:

1. 레퍼런스 수집 (getdesign.md 등에서 최소 20개 이상 스크랩)
2. 공통점 추출 (마음에 드는 사이트들의 공통 패턴 정리)
3. 제약 조건 설정 (색 2개, 폰트 2개, 최대 너비 고정)
4. 종이 와이어프레임 (5분이면 충분합니다)
5. 브라우저에서 직접 조정 (CSS는 실시간 피드백이 가능한 최고의 디자인 도구)

다음 글에서는 이 디자인을 실제로 코드로 옮기고, 도메인을 구입하고 Vercel에 배포하는 과정을 다루겠습니다. 만 원이면 충분합니다.