Rubric Labs
C1· 정적 웹페이지···Ch 4 / 6

프롬프트로 디자인 반복 개선하기

색상·레이아웃·텍스트를 자연어로 수정 요청하는 반복 개선 사이클을 익혀요.

이 챕터를 끝내면 디자인 용어를 몰라도 원하는 시각적 결과를 Codex에게 정확히 전달하고, 여러 번 수정을 반복해 완성도를 높일 수 있어요.

왜 한 번에 완성하려 하면 안 되나요?

첫 프롬프트로 완벽한 결과물이 나오는 경우는 거의 없어요. 전문 디자이너도 시안을 여러 번 수정해요. Codex와 일할 때도 마찬가지예요 — 초안을 빠르게 뽑고, 마음에 안 드는 부분을 하나씩 말로 고쳐가는 것이 가장 효율적인 방법이에요.

핵심 원칙은 한 번에 한 가지만 바꾸기예요. 색상·레이아웃·텍스트를 한 메시지에 몰아 넣으면 Codex가 의도를 잘못 해석할 확률이 높아져요.

실제 수정 사이클 따라가기

이전 챕터에서 만든 포트폴리오 페이지를 예시로 써요.

시작 상태 — 가운데 정렬된 단순한 카드 안에 'PORTFOLIO' 라벨, 이름, 직업, 자기소개 한 단락, 이메일 링크가 들어 있는 초안이에요. 배경은 거의 흰색에 가깝고 텍스트는 검정이라 미니멀하지만 다소 밋밋해요.

초안 포트폴리오 페이지 — PORTFOLIO 라벨, 이름, 직업, 소개 단락, 이메일 링크가 들어간 흰 카드 형태

1단계: 분위기부터 잡기

디자인 용어를 몰라도 괜찮아요. 느낌을 말하면 돼요.

전체적으로 너무 차갑고 밋밋해요. 따뜻하고 아늑한 분위기로 바꿔주세요. 카드 배경을 크림색 계열로, 'PORTFOLIO' 라벨과 이메일 링크 색은 테라코타 톤으로요.

카드 배경이 크림색, 강조 텍스트가 테라코타 색으로 바뀐 결과 화면

2단계: 레이아웃 조정

결과가 마음에 들기 시작했지만 텍스트가 너무 넓게 퍼져 있다고 가정해요.

본문 텍스트가 화면 가득 펼쳐져서 읽기 불편해요. 텍스트 영역 너비를 줄여서 가운데 정렬해주세요. 신문 칼럼처럼 좁고 읽기 편하게요.

본문 텍스트가 중앙 컬럼으로 좁아진 결과 화면

3단계: 세부 텍스트 수정

레이아웃이 잡혔으면 문구를 다듬어요. 페이지 안에 실제로 있는 텍스트(예: 'PORTFOLIO' 라벨, 직업 부제, 자기소개 첫 문장)를 골라서 바꿔달라고 하면 돼요.

'PORTFOLIO' 라벨을 'Hi, I'm' 같은 친근한 인사로 바꿔주세요. 그리고 자기소개 문단이 한 단락으로 길어 보이니, 핵심 한 문장 + 보충 한 문장의 두 단락으로 나눠주세요.

헤더 문구와 소개 문단이 수정된 최종 결과 화면

막힐 때 쓰는 표현 모음

원하는 결과를 말로 표현하기 어려울 때 아래 패턴을 참고해요.

  • 비교 기준 제시: "애플 홈페이지처럼 여백을 넉넉하게 써주세요"
  • 감정/분위기: "지금보다 전문적이고 신뢰감 있는 느낌으로 바꿔주세요"
  • 반대로 말하기: "지금은 너무 화려해요. 더 단순하게 줄여주세요"
  • 위치 지정: "로고를 왼쪽 위가 아니라 가운데로 옮겨주세요"
  • 되돌리기: "방금 바꾼 강조 색상만 이전으로 되돌려주세요"
  • A/B 요청: "강조 색 두 가지 버전을 보여주세요. 하나는 초록, 하나는 남색으로요"

디자인 톤이 잡혔으면 이제 채워넣을 차례예요. 다음 챕터에서는 이미지·아이콘·새 섹션(프로젝트 카드·FAQ 등)을 자연어 한 줄로 페이지에 추가하는 방법을 다뤄요.