디자인 감각은 타고나는 게 아니다. 나도 처음 개발을 시작했을 때는 로직만 잘 짜면 그만이라고 생각했다. 문제는 항상 '보여지는 것'에서 터졌다. 기능은 멀쩡한데 화면이 어설프면, 사용자는 3초 만에 페이지를 벗어난다.

잔말 말고 바로 시작해보겠다.

먼저 이것만 알고 가자. 웹디자인의 가장 중요한 목표는 사용자에게 전달하고 싶은 내용을 최소한의 요소로 전달하고, 웹사이트의 요소와 상호작용을 많은 설명 없이도 자연스럽게 유도하는 것이다.

초보 개발자, 그리고 사실 연차가 좀 쌓인 개발자들도 자주 하는 실수가 있다. 한 페이지에 모든 정보와 기능을 욱여넣어서 한 번에 다 보여주려는 실수다. 우선순위가 없는 화면 앞에서 사용자의 눈은 아무것도 제대로 읽어내지 못한다.

그래서 내가 실제로 써먹었고, 지금도 디자인을 처음 시작하는 개발자들한테 그대로 알려주는 방법 4가지를 정리했다.

1. 코드보다 Figma를 먼저 켜라

나 같은 풀스택 개발자들은 디자인을 '빨리 해치워야 할 숙제'처럼 여긴다. 그래서 조금이라도 귀찮음을 줄이려고 왼쪽엔 라이브 화면, 오른쪽엔 VS Code를 띄워놓고 코딩과 디자인을 한 번에 해결하려 든다.

이건 아주 잘못된 습관이다. 아무리 우리 뇌가 뛰어나다고 해도 한 번에 두 가지 일을 동시에 완벽하게 해낼 수는 없다. 코드를 짜는 동안 뇌는 로직에 집중하고 있고, 그 상태에서 갑자기 레이아웃이나 여백, 색상 대비 같은 디자인적 판단을 끼워 넣으면 둘 다 어중간해진다. 결과물은 항상 CSS 값만 이리저리 만지다 끝난 애매한 화면이 되고 만다.

그래서 나는 코드를 한 줄도 치기 전에 무조건 Figma부터 켠다.

• 페이지 단위로 와이어프레임을 먼저 그린다. 색이나 폰트는 신경 쓰지 않고, 박스와 텍스트만으로 레이아웃과 우선순위를 잡는다.
• Auto Layout을 적극적으로 쓴다. 요소 사이 간격을 8, 16, 24, 32처럼 배수로 딱딱 떨어지게 맞춰보면, 나중에 Tailwind 같은 프레임워크의 spacing 시스템이 왜 그렇게 설계됐는지 몸으로 이해하게 된다.
• 디자인이 끝나면 Inspect 패널에서 실제 padding, margin, font-size 값을 그대로 뽑아 코드로 옮긴다. 감으로 짜지 않는다.

이렇게 디자인과 개발을 분리하면 두 가지가 좋아진다. 디자인에만 집중하는 시간이 생기니 결과물 자체가 좋아지고, 막상 코딩할 때는 이미 답이 정해져 있으니 작업 속도도 오히려 빨라진다.

2. 레퍼런스 대신 진짜 기업 사이트를 뜯어봐라

Apple, IBM, Vevo, Vercel 같은 사이트를 직접 들어가 보자. 대기업 사이트는 그 분야에서 뛰어난 사람들이 직접 설계한 결과물이라 배울 점이 정말 많다. 이런 기업의 랜딩페이지는 단 한 페이지만으로도 처음 방문한 사람을 완전히 설득할 만큼 깔끔하고 완성도가 높다. 그러니 알맹이 없는 개인 '보여주기식' 레퍼런스를 찾아 헤매느니, 실제로 서비스되고 있는 기업 페이지를 직접 뜯어보는 게 훨씬 낫다.

내가 실제로 하는 방법은 이렇다.

• 브라우저 개발자 도구를 켜고 실제 CSS 값을 확인한다. 폰트 크기, line-height, 컬러 코드, 여백 값을 직접 뽑아본다. '이 정도면 되겠지' 하는 감이 아니라, 프로덕션에서 실제로 쓰이는 숫자를 눈에 익히는 게 핵심이다.
• 스크롤하면서 섹션이 전환되는 지점, 애니메이션이 들어가는 타이밍을 관찰한다. Vercel 같은 사이트는 스크롤 인터랙션 하나만 봐도 배울 게 많다.
• 마음에 드는 섹션 하나를 골라 그대로 Figma에 따라 그려본다. 똑같이 만들어보려고 시도하는 순간, 버튼 하나에도 hover, active, disabled 상태가 다 따로 디자인돼 있다는 것처럼, 평소엔 놓쳤던 디테일이 눈에 들어오기 시작한다.

이 방법의 핵심은 눈으로 스캔하는 게 아니라 손으로 따라 그리는 것이다. 그냥 보기만 하면 다음 날 아무것도 기억나지 않는다.

3. 색과 폰트에 스스로 제약을 걸어라

디자인이 어색한 화면에는 공통점이 있다. 색이 너무 많다는 것이다. 강조하고 싶은 게 많다 보니 파란 버튼, 초록 배지, 주황 경고, 보라 링크가 한 화면에 다 들어가 있다. 결과적으로 아무것도 강조되지 않는 화면이 된다. 모든 걸 강조하면 아무것도 강조되지 않는다는 원칙은 디자인에도 똑같이 적용된다.

그래서 나는 프로젝트를 시작할 때 스스로 규칙부터 정해둔다.

• 색은 최대 4개로 제한한다. 메인 컬러 1개, 중립(그레이 계열) 3단계, 그리고 성공·경고·에러를 나타내는 상태 컬러 정도면 충분하다.
• 폰트는 1~2개로 제한한다. 대부분의 대기업 사이트도 제목용, 본문용 이렇게 두 개 이상은 잘 쓰지 않는다.
• 폰트 크기도 12, 14, 16, 20, 24, 32처럼 스케일을 미리 정해두고 그 안에서만 고른다. 즉흥적으로 15px, 17px 같은 값을 쓰지 않는다.

역설적으로 선택지를 줄일수록 결과물은 더 정돈되고 프로페셔널해 보인다. tailwind.config.js 같은 곳에 컬러와 폰트 스케일을 미리 정의해 두면 강제로라도 이 규칙을 지킬 수 있어서, 나는 항상 프로젝트 초기에 이 작업부터 해둔다.

4. 만든 걸 반드시 코드로 옮기고, 남에게 보여줘라

이게 가장 중요한 방법이다. 몇 시간 동안 자신의 프로젝트를 계속 봐온 당신은 아주 완벽한 디자인일지 몰라도 처음 보는 다른 사람 눈에는 난잡하고 위계가 안 잡혀있는 중국산 TEMU사이트로 보일 수도 있는 법이다.

Figma에서 아무리 예쁜 화면을 만들어도 그 자체로 실력이 느는 건 아니다. 실력은 '디자인 > 코드 > 피드백'이라는 루프를 몇 번 돌렸는지에 비례해서 는다.

• Figma에서 디자인이 끝나면 그 주 안에 반드시 코드로 옮긴다. 미뤄두면 디테일을 다 잊어버리고 '대충 비슷하게' 구현하게 된다.
• 구현한 결과물을 스크린샷으로 남겨서 원본 디자인과 나란히 놓고 비교한다. 여백이 틀어진 곳, 폰트 굵기가 다른 곳이 바로 눈에 보인다.
• 동료나 커뮤니티에 결과물을 올리고 피드백을 받는다. 혼자 만든 디자인은 스스로 객관적으로 평가하기가 어렵다. 내 눈에는 예뻐 보여도 남이 보면 가독성이 떨어지는 경우가 생각보다 많다.

디자인 감각은 눈으로 보는 인풋, 손으로 만드는 아웃풋, 남의 피드백이라는 세 가지가 계속 순환할 때 는다. 이 중 하나라도 빠지면 감각은 잘 늘지 않는다.

마무리

정리하면 이렇다.

1. 코딩과 디자인을 절대 동시에 하지 말고, Figma에서 디자인을 먼저 끝낸다.
2. 개인 레퍼런스 대신 실제 서비스 중인 기업 사이트를 직접 뜯어보고 따라 그려본다.
3. 색과 폰트는 스스로 제약을 걸어서 선택지를 줄인다.
4. 완성한 디자인은 반드시 코드로 옮기고, 남에게 보여주고 피드백을 받는다.

디자인 감각은 타고나는 재능이라기보다, 이 네 가지를 반복하면서 쌓이는 '눈썰미'에 가깝다. 나도 처음부터 잘했던 게 아니라, 이 루틴을 몇 달 반복하고 나서야 "아, 이 버튼은 왜 어색해 보이지"가 눈에 들어오기 시작했다.

사소한 디자인부터라도 정리된 디자인은 사용자로부터 좋은 UX경험을 보여줄 수 있다.

오늘 당장 Figma부터 켜보자.