06기본과정180분 (이론 60 + 실습 120)

화면 디자인 노하우

“기능이 되는 것과 좋아 보이는 것은 다르다”

02이 차시를 마치면

1.레이아웃·여백·정렬의 기본 원칙을 적용해 화면을 배치할 수 있다.
2.화면의 목적에 맞는 타이포그래피와 컬러 조합을 고를 수 있다.
3.참고할 만한 디자인 사례를 수집하고 내 화면에 가져올 요소를 추출할 수 있다.
4.'예쁘게 해줘' 대신 AI가 실행할 수 있는 구체적인 디자인 지시문을 작성할 수 있다.
5.흔히 촌스러워 보이는 실수를 스스로 점검하고 고칠 수 있다.

03왜 필요한가

사내 비품 신청 페이지를 며칠 밤새워 완성했다. 신청·승인·재고 확인까지 기능은 다 동작한다. 그런데 팀에 링크를 공유했더니 돌아온 반응은 '기능은 좋은데, 화면이 좀 옛날 사이트 같다'는 한마디였다. 무엇을 어떻게 고쳐야 할지 감이 잡히지 않아, 색만 몇 번 바꿔보다가 그대로 덮어버린 경험이 있을 것이다.

여백 없이 정보를 욱여넣어 화면이 답답하고 어디를 먼저 봐야 할지 알 수 없다.
색과 글꼴을 그때그때 골라 화면마다 느낌이 달라지고 산만해 보인다.
AI에게 '예쁘게 해줘'라고만 요청하면 매번 다른 결과가 나와 방향을 잡을 기준이 없다.
참고할 기준 없이 감으로 디자인하면 마음에 안 들 때마다 처음부터 다시 갈아엎게 된다.

04개념 설명

레이아웃과 여백의 기본기

화면이 촌스러워 보이는 가장 흔한 이유는 색이 아니라 정렬과 여백이다. 요소들이 보이지 않는 기준선(그리드)에 맞춰 나란히 정렬돼 있는지, 관련 있는 정보끼리는 가깝게 붙고 관련 없는 정보끼리는 충분히 떨어져 있는지만 봐도 화면의 정돈된 정도가 크게 달라진다.

여백은 '빈 공간을 낭비하는 것'이 아니라 '무엇이 더 중요한지 알려주는 신호'다. 버튼 하나, 제목 하나 주변에 여백을 넉넉히 두면 그 요소가 화면에서 가장 먼저 눈에 들어온다. 반대로 여백 없이 정보를 촘촘히 채우면 모든 것이 똑같이 안 중요해 보인다.

여백 없이 채우면

모든 게 똑같이 안 중요해 보인다

정보를 촘촘히 채운 화면 — 어디부터 봐야 할지 알 수 없다

여백을 넉넉히 두면

중요한 것이 먼저 눈에 들어온다

제목·버튼 주변에 공간을 남긴 화면

요소는 보이지 않는 기준선(그리드)에 맞춰 정렬한다
관련 있는 정보는 가깝게, 관련 없는 정보는 멀게 배치한다
여백은 낭비가 아니라 정보의 우선순위를 나타내는 장치다

타이포와 컬러 고르는 법

글꼴은 본문용 1개, 제목용 1개면 충분하다. 두 개를 넘어가는 순간 화면이 산만해진다. 한글 화면이라면 가독성이 검증된 무료 한글 폰트(예: 구글 폰트의 한글 지원 폰트) 중에서 고르는 것으로 시작해도 좋다.

색은 메인 컬러 1개와 회색조(밝은 회색부터 어두운 회색까지 몇 단계)의 조합으로 시작한다. 메인 컬러는 '가장 중요한 동작'(버튼 등)에만 아껴 쓴다. 색을 여러 개 쓰고 싶어질 때가 바로 화면이 산만해지기 시작하는 신호다.

요소	규칙
글꼴	본문 1개 + 제목 1개
색	메인 1개 + 회색조
강조	메인 컬러는 핵심 동작에만

글꼴은 본문·제목 각 1개, 총 2개를 넘기지 않는다
색은 메인 1개 + 회색조로 시작하고, 그라데이션은 신중하게 쓴다
메인 컬러는 가장 중요한 동작에만 아껴서 쓴다

참고 사례를 모으고 뜯어보는 법

백지에서 디자인을 시작하지 않는다. 내가 만들려는 화면과 목적이 비슷한 서비스를 3개쯤 찾아 캡처해두고, 각각에서 '내 화면에 가져오고 싶은 요소'를 한 가지씩 뽑아낸다. 전체를 통째로 베끼는 게 아니라, 레이아웃 구조나 정보 배치 순서 같은 '뼈대'만 참고하는 것이다.

레퍼런스를 모을 때는 화면을 통째로 보지 말고 부분으로 쪼개 본다. 이 화면은 버튼을 어디에 뒀는지, 제목과 본문 사이 여백은 얼마나 되는지, 색을 몇 개나 썼는지 하나씩 뜯어보면 다음 단계인 디자인 지시문 작성이 훨씬 쉬워진다.

01화면 2~3개 캡처목적이 비슷한 서비스

02요소 단위로 쪼개기배치·여백·색 개수

03뼈대만 참고텍스트·이미지·로고는 베끼지 않음

목적이 비슷한 서비스 화면 2~3개를 캡처해 모은다
화면 전체가 아니라 배치·여백·색 개수 같은 요소 단위로 뜯어본다
레이아웃 구조만 참고하고, 텍스트·이미지·로고는 그대로 베끼지 않는다

AI에게 디자인을 지시하는 문장 만들기

디자인 프롬프트의 핵심은 '예쁘게 해줘'를 금지하는 것이다. '예쁘게'는 목표이지 지시가 아니다. AI는 그 말을 들었을 때 매번 다른 기준으로 '예쁨'을 상상하기 때문에, 요청할 때마다 결과가 널뛴다. 대신 쓰는 사람이 누구인지, 어떤 분위기를 원하는지, 색과 글꼴을 몇 개까지 쓸지, 가장 중요한 동작이 무엇인지를 문장으로 구체화해서 전달해야 한다.

조건을 구체적으로 적으면 AI가 만든 결과를 두고 '이 부분은 조건에 안 맞으니 고쳐달라'고 정확히 되짚을 수 있다는 것도 큰 이점이다. 결과를 보여주기 전에 레이아웃을 한 문단으로 먼저 설명해달라고 요청해두면, 코드를 다 받은 뒤에 갈아엎는 시행착오도 줄어든다.

이렇게 말하면

"예쁘게 해줘"

AI가 매번 다른 기준으로 상상 → 결과가 요청할 때마다 널뛴다

이렇게 말하면

사용자·분위기·색·글꼴·여백·핵심 동작을 문장으로

결과가 조건에 맞는지 판단하고, 안 맞으면 정확히 되짚을 수 있다

'예쁘게 해줘' 대신 사용자·분위기·색·글꼴·여백·핵심 동작을 문장으로 구체화한다
구체적인 조건이 있어야 결과가 조건에 맞는지 아닌지 판단할 수 있다
코드를 받기 전에 레이아웃 설명을 먼저 요청해 방향을 미리 확인한다

05실습 가이드

1. 리디자인할 화면 정하기
- 03~05차시에서 만든 화면이 있다면 그중 하나를 고른다. 없다면 회사에서 자주 쓰는 낡은 내부 화면(신청서, 목록 화면 등)을 하나 선택한다.
- 고른 화면을 캡처(스크린샷)해 'before' 이미지로 저장해둔다.
예상 결과 — 리디자인 대상 화면의 스크린샷 1장이 확보된다.
안 될 때 — 마땅한 화면이 없다면 제공된 실습용 '사내 비품 신청 페이지' 초안을 사용한다.
2. 문제점 짚어보기
- before 화면을 보며 눈에 걸리는 점을 5개 이상 적어본다.
- 개념에서 배운 기준(정렬, 여백, 색 개수, 글꼴 개수)을 하나씩 대입해 어디가 문제인지 확인한다.
예상 결과 — 구체적인 문제점 목록(5개 이상)이 텍스트로 정리된다.
안 될 때 — 뭐가 문제인지 감이 안 잡히면 P6-5(촌스러움 체크리스트) 프롬프트로 AI에게 먼저 진단을 요청한다.
3. 레퍼런스 3개 모으기
- 목적이 비슷한 화면을 다른 서비스에서 3개 찾아 캡처한다. 사내 시스템일 필요는 없고 용도만 비슷하면 된다.
- 각 레퍼런스에서 '내 화면에 가져오고 싶은 요소'를 한 가지씩 메모한다.
예상 결과 — 레퍼런스 이미지 3개와 각각의 메모 한 줄이 준비된다.
안 될 때 — 레퍼런스를 못 찾겠으면 furtherReading에 안내된 참고 사이트에서 찾아본다.
4. 디자인 지시문 작성하기
- P6-1 프롬프트의 대괄호를 자신의 화면 조건(쓰는 사람, 분위기, 색, 글꼴, 핵심 동작)으로 채운다.
- 완성한 문장에 '예쁘게'라는 단어가 들어가지 않았는지 확인한다.
예상 결과 — 사용자·분위기·색·글꼴·여백·핵심 동작이 모두 채워진 지시문이 완성된다.
안 될 때 — 조건을 못 채우겠으면 2단계에서 적은 문제점을 거꾸로 뒤집어 조건으로 바꿔본다(예: '그라데이션이 많다' → '그라데이션 금지').
5. AI에게 레이아웃 설명부터 요청하기
- 완성한 지시문을 Claude Code에 전달한다.
- 코드를 받기 전에 어떤 레이아웃으로 갈지 한 문단 설명을 먼저 받는다.
- 설명이 의도와 다르면 코드를 받기 전에 방향 수정을 요청한다.
예상 결과 — 레이아웃 설명을 먼저 받은 뒤, 그 방향에 맞는 화면(HTML/CSS)을 받는다.
안 될 때 — AI가 바로 코드부터 만들어버리면 '레이아웃 설명을 문단으로 먼저 달라'고 다시 요청한다.
6. 결과 적용하고 실제로 띄워보기
- 받은 코드를 실제 파일에 적용해 브라우저에서 열어본다.
- 브라우저 창 너비를 좁혀 모바일 화면 크기에서도 확인한다.
예상 결과 — after 화면이 브라우저에 정상적으로 표시되고, 좁은 화면에서도 레이아웃이 깨지지 않는다.
안 될 때 — 레이아웃이 깨지면 P6-3(부분 수정) 프롬프트로 문제 되는 부분만 콕 집어 다시 요청한다.
7. before/after 비교표 만들기
- before/after 스크린샷을 나란히 놓는다.
- 2단계에서 적은 문제점이 각각 어떻게 해결됐는지 한 줄씩 적는다.
예상 결과 — 문제점별 해결 여부가 정리된 비교표가 완성된다.
안 될 때 — 해결 안 된 항목이 있으면 그 항목만 짚어 P6-3으로 재요청한다.
8. 촌스러움 체크리스트로 최종 검수하기
- P6-5 프롬프트로 AI에게 완성된 화면을 최종 검수받는다.
- 지적받은 항목 중 수용할 것과 의도적으로 유지할 것을 구분해 기록한다.
예상 결과 — 체크리스트 통과 항목과 남은 이슈가 구분되어 정리된다.
안 될 때 — AI가 애매하게 답하면 '그렇게 생각하는 이유를 항목별로 구체적으로 설명해줘'라고 되묻는다.

06실전 프롬프트

P6-1AI에게 디자인을 지시할 때

사용 시점 — 실습 4~5단계 — 조건을 구체화해 첫 디자인 요청을 보낼 때

[사내 비품 신청 페이지]를 만들려고 해. 다음 조건으로 디자인해줘.

· 쓰는 사람: [사무직 직원], 하루 [2~3번] 짧게 사용
· 분위기: 신뢰감 있고 차분하게. 화려하거나 트렌디할 필요 없음
· 색: 메인 1개 + 회색조. 그라데이션 금지
· 글꼴: 본문용 1개, 제목용 1개. 한글 가독성 우선
· 여백을 넉넉히, 한 화면에 정보를 욱여넣지 말 것
· 가장 중요한 동작은 [신청하기] 버튼 하나

결과를 보여주기 전에, 어떤 레이아웃으로 갈지
한 문단으로 먼저 설명해줘.

기대 결과 — 레이아웃 설명 후 구현. 마음에 안 들면 구현 전에 방향 수정 가능.

P6-2레퍼런스를 주고 리디자인 요청할 때

사용 시점 — 실습 3단계에서 모은 레퍼런스를 반영해 방향을 잡을 때

참고할 화면 3개를 캡처해서 첨부할게(또는 특징을 말로 설명할게).

[레퍼런스 1: 어떤 서비스의 어떤 화면인지, 마음에 든 점]
[레퍼런스 2: 동일하게]
[레퍼런스 3: 동일하게]

이 화면들의 레이아웃 구조(정보 배치 순서, 버튼 위치, 여백 쓰는 방식)만 참고해서
내 [사내 비품 신청 페이지]를 디자인해줘.
텍스트·이미지·로고는 참고하지 말고 내 내용 그대로 써줘.

기대 결과 — 레퍼런스의 구조만 반영하고 내용은 내 것으로 채운 디자인을 받는다.

P6-3컬러와 타이포만 조정하고 싶을 때

사용 시점 — 레이아웃은 마음에 들고 색·글꼴만 바꾸고 싶을 때

지금 화면의 레이아웃과 구조는 그대로 두고,
색과 글꼴만 다음 조건으로 바꿔줘.

· 메인 색을 [원하는 색]으로
· 나머지는 회색조로 통일
· 본문 글꼴을 [원하는 글꼴]로

레이아웃, 여백, 버튼 위치는 절대 건드리지 마.

기대 결과 — 레이아웃 변경 없이 색과 글꼴만 반영된 결과를 받는다.

P6-4AI가 너무 화려하게 바꿔놨을 때 복구용

사용 시점 — 결과물이 요청보다 과하게 화려해졌을 때(복구 프롬프트)

방금 준 디자인이 내가 요청한 것보다 너무 화려해.

그라데이션, 그림자, 애니메이션 같은 걸 넣은 이유를
항목별로 하나씩 설명해줘.

그리고 다음 조건에 맞게 다시 단순하게 만들어줘.
· 그라데이션 금지, 그림자는 최소한으로만
· 색은 메인 1개 + 회색조를 넘기지 말 것
· 애니메이션은 넣지 말 것

바꾼 부분이 어디인지도 알려줘.

기대 결과 — 과했던 요소가 정리되고, 무엇을 왜 걷어냈는지 설명을 받는다.

P6-5촌스러움 체크리스트로 검수받을 때

사용 시점 — 실습 8단계 — 완성된 화면을 최종 점검할 때

지금 만든 [사내 비품 신청 페이지] 화면을 검수해줘.

다음 항목 기준으로 하나씩 통과/미통과를 표시하고,
미통과 항목은 이유와 고치는 방법을 알려줘.

1. 정렬이 안 맞는 요소가 있는지
2. 색을 3개 이상 쓰고 있는지
3. 글꼴을 3개 이상 쓰고 있는지
4. 여백 없이 정보가 붙어 있는 구간이 있는지
5. 가장 중요한 동작(버튼)이 한눈에 띄는지

기대 결과 — 체크리스트 항목별 통과 여부와, 미통과 항목의 구체적인 수정 방법을 받는다.

07이것만은 주의

'예쁘게 해줘'의 함정

무슨 일이 생기나 — '예쁘게 해줘'라고만 요청하면 AI는 매번 다른 기준으로 예쁨을 상상해 요청할 때마다 결과가 널뛴다. 왜 그렇게 만들었는지 설명도 못 받아 수정 방향도 잡을 수 없다.

대처 — 쓰는 사람·분위기·색·글꼴·여백·핵심 동작을 문장으로 구체화해서 요청한다(P6-1). '예쁘게'는 목표일 뿐 지시가 아니라는 점을 기억한다.

트렌디한 것과 신뢰감 있는 것을 혼동한다

무슨 일이 생기나 — 화려한 그라데이션, 그림자, 애니메이션을 잔뜩 넣어 오히려 산만하고 신뢰가 안 가는 화면이 된다.

대처 — 사용 맥락(사내 도구인지 소비자용 마케팅 페이지인지)에 맞는 분위기를 먼저 정하고, 화려함보다 여백과 정렬을 우선한다.

레퍼런스를 그대로 베낀다

대처 — 레퍼런스에서는 레이아웃 구조와 톤만 참고하고, 텍스트·이미지·로고는 반드시 자신의 것으로 바꾼다.

디자인에만 시간을 다 쓴다

무슨 일이 생기나 — 색 하나, 폰트 하나를 두고 AI와 계속 주고받다 보면 정작 기능 구현 시간이 부족해진다.

대처 — 이번 차시는 '동작하는 화면 하나'를 리디자인하는 데 시간을 한정하고, 나머지 화면에는 이번에 정한 원칙(컬러·폰트·여백 규칙)만 그대로 적용한다.

08자가 점검

0 / 5 완료0%

레이아웃·여백·정렬 기준으로 내 화면의 문제점을 짚어낼 수 있다
메인 컬러 1개 + 회색조, 폰트 2개 이내로 화면을 정리했다
참고 사례 3개를 모으고 각각에서 가져올 요소를 정리했다
'예쁘게 해줘' 없이 구체적인 조건으로 디자인 지시문을 작성했다
before/after를 비교해 문제점이 실제로 해결됐는지 확인했다

09과제

자신의 실제 프로젝트(또는 회사에서 자주 쓰는 낡은 내부 화면) 중 하나를 골라 이번 실습과 같은 방식으로 before/after 리디자인을 진행한다. 03~05차시 실습 결과물이 있다면 그것을 대상으로 삼는 것을 권장한다.

제출 형식 — ① before/after 스크린샷 ② 사용한 디자인 지시 프롬프트 전문 ③ 문제점-해결 비교표를 하나의 문서로 정리해 제출한다.

10더 알아보기

Dribbble, Mobbin 같은 디자인 레퍼런스 사이트 — 업종·화면 유형별로 검색해 참고 사례를 모을 때 사용
구글 폰트(Google Fonts) 한글 지원 목록 — 본문·제목용 폰트 조합을 고를 때 참고

그리드(Grid): — 화면 요소를 일정한 열과 간격에 맞춰 정렬하는 보이지 않는 기준선 체계.
여백(Whitespace): — 요소 사이에 의도적으로 비워두는 공간. 정보의 우선순위와 가독성을 만든다.
컬러 팔레트: — 화면 전체에서 일관되게 사용하는 색의 조합. 보통 메인 색 1개와 보조 색(회색조)으로 구성한다.

다음 차시 예고 — 다음 차시에서는 지금까지 손에 익힌 도구와 디자인 감각을 바탕으로, 만들고 싶은 서비스의 요구사항을 정리하고 Claude Code로 PRD를 작성하는 법을 다룹니다.