디자인 수정 프롬프트 쓰기

"예쁘게 해줘"라고 말하면 왜 이상한 화면이 나올까

첫 앱을 만들고 나면 대부분 비슷한 순간을 만납니다. 기능은 대충 되는 것 같은데, 화면이 어딘가 허전합니다. 버튼은 작고, 글자는 들쭉날쭉하고, 색상은 애매합니다. 그래서 AI 앱 빌더에게 이렇게 말하고 싶어집니다.

이 앱을 예쁘게 만들어줘.

문제는 여기서 시작됩니다. 사람마다 생각하는 "예쁜 디자인"이 다르기 때문입니다. 어떤 사람에게 예쁜 디자인은 파스텔톤 다이어리 느낌입니다. 어떤 사람에게는 깔끔한 업무용 SaaS, 즉 회사에서 쓰는 구독형 웹서비스 같은 느낌입니다. 또 어떤 사람에게는 공공기관 보고서처럼 단정하고 신뢰감 있는 화면이 더 예쁘게 느껴질 수 있습니다.

AI도 마찬가지입니다. "예쁘게"라는 말만 들으면 추측해서 디자인합니다. 운이 좋으면 마음에 드는 화면이 나오지만, 운이 나쁘면 앱의 목적과 전혀 맞지 않는 화면이 나옵니다. 예약 문의 앱인데 게임 앱처럼 화려해질 수도 있고, 운동 기록 앱인데 공공문서처럼 딱딱해질 수도 있습니다.

디자인 수정 프롬프트의 핵심은 간단합니다.

"예쁘게"가 아니라 "어떤 느낌으로, 무엇을, 어떻게 바꿀지" 말해야 합니다.

이 장에서는 초보자가 디자인 용어를 많이 몰라도 원하는 분위기를 구체적인 화면 요청으로 바꾸는 방법을 배웁니다. 색상, 여백, 글자 크기, 카드 스타일, 버튼 크기처럼 눈에 보이는 요소를 어떻게 말하면 되는지 익히고, 모바일 우선 디자인을 요청할 때 왜 버튼 크기와 화면 폭까지 함께 말해야 하는지도 살펴보겠습니다.

디자인은 장식이 아니라 사용 방법을 알려주는 신호다

디자인이라고 하면 색상이나 꾸밈을 먼저 떠올리기 쉽습니다. 물론 보기 좋은 화면도 중요합니다. 하지만 앱에서 디자인은 단순한 장식이 아닙니다. 사용자가 무엇을 먼저 봐야 하는지, 어디를 눌러야 하는지, 어떤 정보가 중요한지 알려주는 안내판입니다.

예를 들어 독서 기록 앱을 생각해보겠습니다. 화면에 책 제목, 저자, 읽은 날짜, 별점, 메모가 모두 같은 크기로 나열되어 있다면 사용자는 어디를 먼저 봐야 할지 헷갈립니다. 하지만 책 제목은 크게, 메모는 작게, 별점은 눈에 띄게, 삭제 버튼은 조심스럽게 배치하면 사용법을 설명하지 않아도 훨씬 이해하기 쉬워집니다.

할 일 관리 앱도 마찬가지입니다. 오늘 해야 할 일이 가장 위에 있고, 완료한 일은 흐리게 표시되고, 추가 버튼이 엄지손가락이 닿기 쉬운 위치에 있다면 사용자는 자연스럽게 앱을 사용할 수 있습니다. 반대로 버튼이 너무 작거나 색상이 너무 비슷하면 기능이 있어도 쓰기 어렵습니다.

강의 후기 수집 앱에서는 신뢰감이 중요합니다. 너무 장난스러운 색상보다 차분한 색상, 충분한 여백, 읽기 쉬운 글자 크기가 더 잘 어울립니다. 후기를 제출하는 사람은 "내 의견이 제대로 전달되겠구나"라는 느낌을 받아야 합니다.

디자인 수정 프롬프트는 결국 이런 질문에 답하는 일입니다.

• 이 앱은 누구를 위한 화면인가?

• 사용자는 어떤 정보를 가장 먼저 봐야 하는가?

• 어떤 분위기여야 안심하고 사용할 수 있는가?

• 모바일에서 손가락으로 누르기 편한가?

• 중요한 버튼과 덜 중요한 버튼이 구분되는가?

이 질문에 답할 수 있으면 전문 디자이너가 아니어도 AI에게 꽤 좋은 디자인 요청을 할 수 있습니다.

분위기를 구체화하는 첫 번째 방법: 사용 장면으로 말하기

초보자가 가장 쉽게 쓸 수 있는 디자인 표현은 "사용 장면"입니다. 색상 코드나 전문 용어를 몰라도 괜찮습니다. 이 앱이 어떤 상황에서 쓰이는지 설명하면 AI가 디자인 방향을 잡기 쉬워집니다.

예를 들어 "다이어리 느낌"이라고만 말하면 조금 막연합니다. 하지만 다음처럼 말하면 훨씬 선명해집니다.

이 앱은 개인이 매일 저녁 조용히 기록하는 독서 다이어리처럼 느껴졌으면 합니다. 전체적으로 따뜻한 크림색 배경, 부드러운 카드, 둥근 버튼, 차분한 갈색 계열 포인트 색상을 사용해주세요. 글자는 너무 작지 않게 하고, 기록을 읽을 때 편안한 분위기로 정리해주세요.

이번에는 "업무용 SaaS 느낌"을 보겠습니다. SaaS는 Software as a Service의 줄임말로, 설치하지 않고 웹에서 로그인해 사용하는 업무용 서비스를 말합니다. 초보자에게는 "회사에서 쓰는 깔끔한 웹 업무 도구"라고 이해하면 충분합니다.

이 앱을 업무용 SaaS 느낌으로 바꿔주세요. 흰색 또는 아주 연한 회색 배경을 사용하고, 정보는 카드와 표 형태로 정리해주세요. 주요 버튼은 파란색 계열로 통일하고, 전체적으로 깔끔하고 신뢰감 있게 보이도록 여백을 충분히 주세요. 장식은 줄이고 업무 화면처럼 빠르게 읽히는 구성을 원합니다.

공공기관 보고서 느낌은 또 다릅니다. 여기서는 화려함보다 단정함, 신뢰감, 읽기 쉬움이 중요합니다.

이 앱을 공공기관 보고서처럼 단정하고 신뢰감 있는 화면으로 바꿔주세요. 흰색 배경을 기본으로 하고, 남색 또는 짙은 회색을 포인트 색상으로 사용해주세요. 제목, 설명, 입력 영역, 결과 영역이 명확히 구분되도록 하고, 글자 크기는 읽기 쉽게 유지해주세요. 불필요한 애니메이션이나 화려한 장식은 넣지 말아주세요.

세 프롬프트 모두 "예쁘게"라는 말을 거의 쓰지 않았습니다. 대신 사용 장면, 색상, 여백, 카드, 버튼, 글자 크기, 장식 정도를 말했습니다. 이것이 디자인 수정 프롬프트의 기본입니다.

다이어리 느낌, 업무용 SaaS 느낌, 공공기관 보고서 느낌은 어떻게 다를까

같은 앱이라도 디자인 톤에 따라 전혀 다른 앱처럼 보입니다. 예를 들어 "회의록 정리 앱"을 세 가지 분위기로 바꿔보겠습니다.

다이어리 느낌의 회의록 앱은 개인 노트에 가깝습니다. 회의 후 생각을 정리하고, 다음에 할 일을 부드럽게 기록하는 화면입니다. 배경은 크림색이나 연한 베이지가 어울리고, 카드 모서리는 둥글고, 버튼 문구도 "회의록 저장하기", "오늘 회의 돌아보기"처럼 친근하게 쓸 수 있습니다.

업무용 SaaS 느낌의 회의록 앱은 팀이 함께 쓰는 도구처럼 보여야 합니다. 목록, 검색, 필터, 상태 표시가 중요합니다. 배경은 흰색이나 연회색, 버튼은 파란색 또는 보라색 계열, 정보는 표나 카드로 정리하면 좋습니다. 문구도 "새 회의록 추가", "담당자별 보기", "액션 아이템 확인"처럼 업무 흐름에 맞춰야 합니다.

공공기관 보고서 느낌의 회의록 앱은 격식과 정확성이 중요합니다. 제목, 회의 일시, 참석자, 주요 안건, 결정 사항, 후속 조치가 명확히 구분되어야 합니다. 색상은 남색, 회색, 흰색처럼 차분한 계열이 어울립니다. 버튼도 너무 튀기보다 "저장", "출력용 보기", "검토 완료"처럼 단정한 표현이 좋습니다.

이 차이를 표로 정리하면 다음과 같습니다.

여기서 중요한 것은 어떤 톤이 더 좋다는 뜻이 아닙니다. 앱의 사용자와 목적에 맞는 톤이 따로 있다는 뜻입니다. 초보자가 흔히 하는 실수는 모든 앱을 "요즘 스타일로 예쁘게" 만들려고 하는 것입니다. 하지만 예약 문의 앱에는 신뢰감이 필요하고, 운동 루틴 기록 앱에는 활기찬 느낌이 필요하며, 강의 후기 수집 앱에는 작성하기 편한 안정감이 필요합니다.

눈에 보이는 요소를 하나씩 지정하기

디자인 수정 요청을 잘하려면 화면을 이루는 요소를 나눠서 말하면 됩니다. 처음부터 어려운 디자인 용어를 쓸 필요는 없습니다. 우리가 눈으로 보는 것부터 차근차근 말하면 됩니다.

색상은 앱의 첫인상을 만듭니다. 파란색 계열은 신뢰감과 업무적인 느낌을 주기 쉽고, 초록색 계열은 건강, 성장, 안정감을 떠올리게 합니다. 노란색이나 주황색은 활기차고 친근하지만 너무 많이 쓰면 산만해질 수 있습니다. 검정과 흰색 중심의 디자인은 세련되어 보일 수 있지만, 초보자용 앱에서는 차갑게 느껴질 수도 있습니다.

여백은 화면의 숨 쉴 공간입니다. 여백이 너무 적으면 정보가 서로 붙어 답답해 보입니다. 반대로 여백이 적절하면 앱이 훨씬 정돈되어 보입니다. 특히 모바일 화면에서는 여백이 중요합니다. 손가락으로 누르는 버튼과 버튼 사이가 너무 가까우면 잘못 누르기 쉽기 때문입니다.

글자 크기는 사용성에 직접 영향을 줍니다. 제목은 크게, 설명은 중간 크기, 보조 정보는 작게 보여주면 됩니다. 모든 글자를 비슷한 크기로 두면 중요한 정보가 묻힙니다. 반대로 글자 크기를 너무 많이 섞으면 화면이 어수선해집니다.

카드 스타일은 정보를 묶는 방식입니다. 카드란 하나의 정보 덩어리를 담는 박스라고 생각하면 됩니다. 독서 기록 앱에서는 책 한 권이 카드 하나가 될 수 있고, 예약 문의 앱에서는 예약 문의 한 건이 카드 하나가 될 수 있습니다. 카드에 둥근 모서리, 그림자, 테두리, 배경색을 어떻게 줄지에 따라 분위기가 달라집니다.

버튼은 사용자의 행동을 이끄는 장치입니다. "저장하기", "추가하기", "문의 보내기" 같은 주요 버튼은 눈에 잘 띄어야 합니다. 반면 "삭제" 버튼은 너무 크고 화려하면 위험합니다. 삭제는 실수로 누르면 곤란하므로 작고 조심스럽게, 또는 확인 단계를 거치게 만드는 것이 좋습니다.

다음 프롬프트는 이런 요소를 한 번에 지정하는 예시입니다.

현재 앱의 기능은 유지하고 디자인만 수정해주세요.

원하는 분위기:
- 개인 기록용 다이어리 앱처럼 따뜻하고 차분한 느낌

수정할 화면 요소:
1. 배경은 흰색보다 따뜻한 크림색 계열로 바꿔주세요.
2. 기록 목록은 카드 형태로 보여주세요.
3. 카드 모서리는 둥글게 하고, 그림자는 아주 약하게 넣어주세요.
4. 제목 글자는 지금보다 조금 더 크게 하고 굵게 표시해주세요.
5. 입력창과 버튼 사이에 여백을 충분히 주세요.
6. 주요 버튼은 부드러운 갈색 또는 올리브색 계열로 통일해주세요.
7. 삭제 버튼은 너무 눈에 띄지 않게 작고 차분한 색으로 처리해주세요.

주의사항:
- 기존 기능은 삭제하지 마세요.
- 데이터 저장 방식은 바꾸지 마세요.
- 화면 문구는 한국어로 자연스럽게 유지해주세요.

이 프롬프트에서 중요한 문장은 "기능은 유지하고 디자인만 수정해주세요"입니다. 디자인을 바꾸라고 했는데 AI가 기능 구조까지 바꿔버리는 경우가 있습니다. 그래서 디자인 수정 프롬프트에서는 기능을 건드리지 말라는 말을 넣는 것이 안전합니다.

모바일 우선 디자인을 요청하는 법

초보자가 만든 앱은 대부분 스마트폰에서 먼저 써보게 됩니다. 독서 기록, 운동 루틴 기록, 예약 문의, 가족 일정 공유 같은 앱은 특히 모바일 사용이 많습니다. 그런데 AI가 만든 첫 화면은 종종 PC 화면 기준으로 만들어집니다. 노트북에서는 괜찮아 보이는데 스마트폰에서는 버튼이 작고, 카드가 찌그러지고, 글자가 너무 촘촘해지는 일이 생깁니다.

이럴 때 필요한 요청이 "모바일 우선 디자인"입니다. 모바일 우선 디자인은 스마트폰 화면에서 먼저 편하게 보이도록 만들고, 그다음 태블릿이나 PC 화면에서도 자연스럽게 넓어지도록 만드는 방식입니다.

여기서 중요한 것은 "모바일 대응해줘"라고만 말하지 않는 것입니다. 무엇을 어떻게 모바일에 맞출지 말해야 합니다.

이 앱을 모바일 우선 디자인으로 수정해주세요.

요청사항:
1. 스마트폰 화면 폭에서도 가로 스크롤이 생기지 않게 해주세요.
2. 주요 버튼은 엄지손가락으로 누르기 쉽게 높이를 충분히 크게 만들어주세요.
3. 버튼과 버튼 사이에는 잘못 누르지 않도록 여백을 주세요.
4. 입력창은 화면 폭에 맞게 넓게 배치해주세요.
5. 목록 카드는 한 줄에 하나씩 세로로 쌓이게 해주세요.
6. 제목, 설명, 입력 영역, 저장 버튼 순서가 위에서 아래로 자연스럽게 이어지게 해주세요.
7. PC 화면에서는 너무 넓게 퍼지지 않도록 가운데 정렬된 최대 폭을 지정해주세요.

기존 기능은 유지하고, 디자인과 배치만 바꿔주세요.

버튼 크기와 화면 폭을 함께 말하는 이유는 실제 사용성 때문입니다. 모바일에서 버튼이 작으면 사용자는 앱이 불편하다고 느낍니다. 화면 폭이 제대로 맞지 않으면 오른쪽 내용이 잘리거나 가로 스크롤이 생깁니다. 초보자는 "디자인이 이상하다"고 느끼지만, 실제로는 버튼 크기, 여백, 화면 폭의 문제인 경우가 많습니다.

특히 예약 문의 앱이나 강의 후기 수집 앱처럼 다른 사람에게 링크를 보내는 앱은 모바일 우선으로 만드는 것이 좋습니다. 상대방이 노트북 앞에 앉아 있을 가능성보다 스마트폰으로 링크를 열 가능성이 더 높기 때문입니다.

브랜드와 사용자에 맞춰 디자인 톤 조정하기

앱 디자인은 내가 좋아하는 색상만으로 정하면 안 됩니다. 누가 쓰는 앱인지, 어떤 상황에서 쓰는 앱인지 생각해야 합니다. 같은 예약 문의 앱이라도 대상에 따라 완전히 달라집니다.

예를 들어 1인 미용실 예약 문의 앱이라면 따뜻하고 감각적인 분위기가 어울릴 수 있습니다. 색상은 베이지, 브라운, 연한 핑크 계열이 자연스럽고, 문구는 "원하시는 날짜와 시술을 알려주세요"처럼 부드러우면 좋습니다.

반면 세무 상담 예약 문의 앱이라면 너무 감성적인 디자인보다 신뢰감과 명확함이 중요합니다. 흰색 배경, 남색 포인트, 정돈된 입력 폼, 개인정보 안내 문구가 필요합니다. 버튼 문구도 "상담 문의 제출"처럼 단정한 편이 좋습니다.

동네 운동 모임 신청 앱이라면 활기차고 부담 없는 분위기가 좋습니다. 초록색이나 주황색 포인트, 큰 버튼, 짧은 설명 문구가 어울립니다. 문구도 "이번 주 운동 참여하기"처럼 행동이 분명해야 합니다.

AI에게는 이런 식으로 대상 사용자를 알려주면 좋습니다.

이 앱은 30~40대 직장인이 업무 중에 빠르게 사용하는 할 일 관리 앱입니다. 귀엽거나 장식적인 느낌보다는 깔끔하고 집중이 잘 되는 업무 도구처럼 보였으면 합니다. 흰색과 연회색을 기본으로 하고, 중요한 버튼만 파란색으로 강조해주세요. 한 화면에서 오늘 할 일, 진행 중인 일, 완료한 일이 명확히 구분되게 디자인해주세요.

또는 이렇게 말할 수도 있습니다.

이 앱은 초등학생 자녀를 둔 부모가 가족 일정을 공유하기 위해 사용하는 앱입니다. 너무 딱딱한 업무 도구처럼 보이지 않았으면 합니다. 가족이 함께 쓰는 캘린더 느낌으로 따뜻하고 친근하게 디자인해주세요. 색상은 연한 노랑, 하늘색, 부드러운 초록색을 사용하고, 일정 카드는 읽기 쉽게 크게 보여주세요. 모바일에서 부모가 빠르게 확인할 수 있도록 오늘 일정이 가장 먼저 보이게 해주세요.

크리에이터용 앱이라면 조금 더 개성을 줄 수 있습니다.

이 앱은 블로거와 콘텐츠 크리에이터가 글감을 저장하는 앱입니다. 스타트업 랜딩페이지처럼 세련되고 가벼운 느낌을 원합니다. 흰색 배경에 검정 텍스트를 기본으로 하고, 포인트 색상은 보라색 계열로 사용해주세요. 글감 카드는 깔끔한 그리드 또는 리스트로 보여주고, 태그가 눈에 잘 띄게 디자인해주세요. 모바일에서는 한 줄 카드 목록으로 바꿔주세요.

이처럼 브랜드와 사용자를 함께 말하면 디자인의 방향이 훨씬 안정됩니다. "내 취향"이 아니라 "사용자에게 맞는 화면"을 요청하는 것이 핵심입니다.

디자인 수정 프롬프트의 기본 구조

디자인 수정 프롬프트는 다음 순서로 쓰면 좋습니다. 이미 앱이 만들어진 상태에서 화면만 바꾸는 요청이므로, 첫 앱 생성 프롬프트보다 더 구체적으로 말해야 합니다.

1. 현재 상태를 짧게 설명합니다.

2. 원하는 디자인 분위기를 말합니다.

3. 대상 사용자와 사용 상황을 말합니다.

4. 색상, 여백, 글자 크기, 카드, 버튼을 지정합니다.

5. 모바일 화면에서 원하는 배치를 말합니다.

6. 바꾸지 말아야 할 것을 분명히 말합니다.

이 구조를 템플릿으로 만들면 다음과 같습니다.

현재 앱의 기능은 유지하고 디자인만 수정해주세요.

현재 문제:
[예: 화면이 너무 밋밋하고, 버튼과 입력창이 작아서 모바일에서 사용하기 불편합니다.]

원하는 분위기:
[예: 업무용 SaaS처럼 깔끔하고 신뢰감 있는 느낌]

사용자:
[예: 30~40대 직장인이 업무 중 빠르게 사용하는 앱]

디자인 요청:
1. 색상: [예: 흰색과 연회색을 기본으로, 주요 버튼은 파란색]
2. 여백: [예: 입력창과 버튼 사이에 충분한 간격]
3. 글자 크기: [예: 제목은 크게, 설명은 읽기 쉽게]
4. 카드 스타일: [예: 목록은 카드 형태, 약한 테두리와 둥근 모서리]
5. 버튼: [예: 주요 버튼은 크게, 삭제 버튼은 작고 조심스럽게]
6. 모바일: [예: 한 줄에 하나의 카드만 보이게 하고 가로 스크롤이 없게]

유지할 것:
- 기존 기능은 삭제하지 마세요.
- 저장 방식은 바꾸지 마세요.
- 화면 문구는 자연스러운 한국어로 유지해주세요.

이 템플릿은 거의 모든 실습 앱에 사용할 수 있습니다. 독서 기록 앱, 할 일 관리 앱, 강의 후기 수집 앱, 예약 문의 앱, 운동 루틴 기록 앱, 프롬프트 보관함 앱에도 그대로 응용할 수 있습니다.

실습 예제 1: 독서 기록 앱을 다이어리 느낌으로 바꾸기

먼저 독서 기록 앱을 떠올려봅시다. 첫 버전은 책 제목, 저자, 메모, 별점, 저장 버튼 정도로 구성되어 있을 것입니다. 기능은 단순하지만 화면이 딱딱할 수 있습니다. 이 앱은 개인이 꾸준히 기록하는 용도이므로 너무 업무용처럼 보일 필요는 없습니다.

다음 프롬프트를 사용해볼 수 있습니다.

독서 기록 앱의 기능은 그대로 유지하고, 디자인만 다이어리 느낌으로 바꿔주세요.

원하는 분위기:
개인이 조용히 책을 읽고 기록하는 따뜻한 독서 노트 느낌이면 좋겠습니다.

디자인 요청:
1. 배경은 차가운 흰색보다 따뜻한 크림색 계열로 바꿔주세요.
2. 입력 영역은 노트에 적는 느낌이 나도록 부드러운 카드로 감싸주세요.
3. 저장된 책 목록은 책 한 권당 하나의 카드로 보여주세요.
4. 책 제목은 카드 안에서 가장 크게 보이게 하고, 저자와 날짜는 작게 보여주세요.
5. 별점은 눈에 잘 띄지만 너무 화려하지 않게 표시해주세요.
6. 버튼은 둥글고 부드러운 색상으로 바꿔주세요.
7. 모바일에서는 입력창과 버튼이 화면 폭에 맞게 넓게 보이도록 해주세요.

주의사항:
기존의 추가, 수정, 삭제 기능은 없애지 말아주세요.

이 요청의 핵심은 "독서 기록 앱답게" 만드는 것입니다. 독서 앱에는 차분함, 읽기 쉬움, 기록하고 싶은 분위기가 중요합니다. 만약 결과가 너무 귀엽게 나오면 이렇게 다시 요청하면 됩니다.

전체 분위기가 조금 과하게 귀엽습니다. 캐릭터나 장식 요소는 줄이고, 성인이 쓰는 차분한 독서 다이어리 느낌으로 조정해주세요. 색상은 크림색과 브라운 계열을 유지하되, 장식보다 읽기 쉬운 카드와 여백에 집중해주세요.

실습 예제 2: 할 일 관리 앱을 업무용 SaaS 느낌으로 바꾸기

할 일 관리 앱은 빠르게 확인하고 처리하는 도구입니다. 너무 감성적인 디자인보다 명확한 구분과 속도가 중요합니다. 오늘 할 일, 진행 중, 완료 같은 상태가 잘 보여야 합니다.

할 일 관리 앱의 기능은 유지하고, 업무용 SaaS 느낌의 깔끔한 디자인으로 수정해주세요.

사용자:
직장인이 업무 중 오늘 할 일을 빠르게 확인하고 처리하는 용도입니다.

디자인 요청:
1. 배경은 흰색 또는 아주 연한 회색으로 해주세요.
2. 상단에는 앱 제목과 간단한 설명을 정돈해서 배치해주세요.
3. 할 일 입력 영역은 화면 위쪽에 명확히 보이게 해주세요.
4. 할 일 목록은 카드 또는 리스트 형태로 깔끔하게 정리해주세요.
5. 완료된 일은 글자를 흐리게 하거나 체크 표시로 구분해주세요.
6. 중요한 버튼은 파란색 계열로 통일해주세요.
7. 삭제 버튼은 빨간색을 쓰되 너무 크게 강조하지 말아주세요.
8. 모바일에서는 버튼 높이를 충분히 키워 손가락으로 누르기 쉽게 해주세요.

주의사항:
기능 추가는 하지 말고, 디자인과 배치만 수정해주세요.

여기서 "기능 추가는 하지 말라"고 말한 이유가 있습니다. AI는 업무용 SaaS 느낌을 요청받으면 통계, 로그인, 팀 관리, 대시보드 같은 기능을 마음대로 추가하려고 할 수 있습니다. 하지만 지금은 디자인 수정이 목적입니다. 기능을 늘리면 버그가 생길 가능성도 함께 늘어납니다.

실습 예제 3: 강의 후기 수집 앱을 공공기관 보고서 느낌으로 바꾸기

강의 후기 수집 앱은 다른 사람이 작성하는 앱입니다. 작성자는 "이 화면이 믿을 만한가?", "내 의견이 제대로 제출되는가?"를 무의식적으로 봅니다. 따라서 지나치게 화려한 디자인보다 단정하고 신뢰감 있는 화면이 좋습니다.

강의 후기 수집 앱을 공공기관 설문 또는 교육기관 보고서처럼 단정한 디자인으로 수정해주세요.

사용자:
강의를 들은 수강생이 모바일 또는 PC에서 후기를 제출합니다.

디자인 요청:
1. 흰색 배경을 기본으로 하고, 남색 또는 짙은 회색을 포인트 색상으로 사용해주세요.
2. 상단에는 강의명, 안내 문구, 제출 예상 시간을 차분하게 보여주세요.
3. 입력 항목은 한눈에 구분되도록 충분한 간격을 주세요.
4. 필수 입력 항목은 명확히 표시해주세요.
5. 제출 버튼은 화면 하단에서 잘 보이게 하되, 과하게 화려하지 않게 해주세요.
6. 제출 완료 메시지는 신뢰감 있게 보여주세요.
7. 모바일 화면에서는 입력창이 너무 작아지지 않게 해주세요.

주의사항:
기존 질문 항목과 저장 기능은 유지해주세요.
한국어 문구는 자연스럽고 정중한 표현으로 다듬어주세요.

이 프롬프트에는 디자인 수정과 문구 수정이 함께 들어 있습니다. 강의 후기 수집 앱처럼 외부 사용자가 쓰는 앱은 문구도 디자인의 일부입니다. "제출!"보다 "후기 제출하기"가 더 자연스럽고, "성공"보다 "후기가 정상적으로 제출되었습니다"가 더 신뢰감을 줍니다.

자주 쓰는 디자인 톤 프롬프트 모음

아래 프롬프트들은 앱 종류에 맞게 바로 복사해서 쓸 수 있습니다. 대괄호 부분만 자신의 앱에 맞게 바꾸면 됩니다.

다이어리 느낌

[앱 이름]의 기능은 유지하고 디자인만 다이어리 느낌으로 바꿔주세요. 따뜻한 크림색 배경, 부드러운 카드, 둥근 버튼, 넉넉한 여백을 사용해주세요. 사용자가 매일 부담 없이 기록하고 싶어지는 차분한 분위기를 원합니다. 모바일에서도 입력창과 저장 버튼이 크게 보이도록 해주세요.

업무용 SaaS 느낌

[앱 이름]을 업무용 SaaS처럼 깔끔하고 효율적인 화면으로 수정해주세요. 흰색과 연회색을 기본으로 사용하고, 주요 버튼은 파란색 계열로 통일해주세요. 정보는 카드나 표 형태로 정리하고, 제목과 상태가 한눈에 보이게 해주세요. 기존 기능은 유지하고 디자인과 배치만 수정해주세요.

공공기관 보고서 느낌

[앱 이름]을 공공기관 보고서처럼 단정하고 신뢰감 있는 디자인으로 수정해주세요. 흰색 배경, 남색 포인트, 명확한 제목 체계, 충분한 여백을 사용해주세요. 불필요한 장식이나 애니메이션은 줄이고, 입력 항목과 결과 영역이 또렷하게 구분되도록 해주세요.

스타트업 랜딩페이지 느낌

[앱 이름]의 첫 화면을 스타트업 랜딩페이지처럼 세련되게 바꿔주세요. 상단에는 앱의 핵심 가치를 짧은 문장으로 보여주고, 주요 행동 버튼을 눈에 띄게 배치해주세요. 흰색 배경에 선명한 포인트 색상을 사용하고, 카드와 아이콘을 활용해 기능을 쉽게 이해할 수 있게 해주세요.

육아 기록 앱 느낌

[앱 이름]을 부모가 편하게 쓰는 육아 기록 앱처럼 따뜻하고 친근한 디자인으로 수정해주세요. 연한 노랑, 하늘색, 부드러운 초록색을 사용하고, 글자와 버튼은 크게 보여주세요. 기록 카드에는 날짜와 주요 내용을 한눈에 볼 수 있게 해주세요. 모바일에서 한 손으로 쓰기 편하게 배치해주세요.

프리미엄 강의 페이지 느낌

[앱 이름]을 프리미엄 온라인 강의 페이지처럼 신뢰감 있고 깔끔하게 디자인해주세요. 어두운 남색 또는 검정 계열 포인트를 사용하고, 중요한 정보는 넓은 카드로 정리해주세요. 제목은 크게, 설명은 읽기 쉽게 배치하고, 신청 또는 제출 버튼은 명확하게 강조해주세요.

모바일 우선 디자인

[앱 이름]을 모바일 우선 디자인으로 수정해주세요. 스마트폰 화면에서 가로 스크롤이 생기지 않게 하고, 입력창과 버튼은 화면 폭에 맞게 크게 배치해주세요. 목록 카드는 한 줄에 하나씩 세로로 쌓아주세요. 버튼 사이에는 충분한 간격을 두고, 엄지손가락으로 누르기 편한 크기로 만들어주세요.

디자인 수정 후 반드시 확인할 것

AI가 디자인을 바꿔준 뒤에는 화면을 그냥 보고 "괜찮네"에서 끝내지 말아야 합니다. 디자인 수정은 기능에 영향을 줄 수 있습니다. 버튼 위치가 바뀌면서 클릭이 안 되거나, 입력창이 사라지거나, 모바일에서 저장 버튼이 화면 밖으로 밀려날 수도 있습니다.

디자인 수정 후에는 다음 순서로 확인해보세요.

• 주요 버튼이 모두 보이는가?

• 버튼을 눌렀을 때 원래 기능이 작동하는가?

• 입력창에 글자를 넣고 저장하면 목록에 표시되는가?

• 모바일 화면에서 가로 스크롤이 생기지 않는가?

• 글자가 너무 작거나 색 대비가 약하지 않은가?

• 삭제 버튼이 실수로 누르기 쉬운 위치에 있지 않은가?

• 한국어 문구가 자연스럽게 보이는가?

• 가장 중요한 정보가 화면 위쪽에 보이는가?

특히 모바일 확인은 꼭 해야 합니다. PC 화면에서 예쁜 앱이 스마트폰에서 불편한 경우가 많습니다. 가능하면 실제 스마트폰으로 링크를 열어보고, 버튼을 눌러보고, 입력도 해보세요. 눈으로 보는 것과 손으로 써보는 것은 다릅니다.

흔한 실수와 고치는 방법

디자인 수정 프롬프트에서 가장 흔한 실수는 막연하게 말하는 것입니다.

좀 더 예쁘고 세련되게 해줘.

이 요청은 나쁘지는 않지만 결과를 예측하기 어렵습니다. 다음처럼 바꾸는 편이 좋습니다.

업무용 SaaS처럼 깔끔하고 세련되게 바꿔주세요. 흰색과 연회색을 기본으로 사용하고, 주요 버튼은 파란색으로 통일해주세요. 카드 간 여백을 늘리고, 제목은 더 크게, 보조 설명은 작게 정리해주세요. 모바일에서 버튼이 누르기 쉽게 높이를 키워주세요.

두 번째 실수는 디자인을 바꾸면서 기능까지 함께 많이 요구하는 것입니다.

디자인을 예쁘게 바꾸고, 로그인도 넣고, 통계도 만들고, 관리자 페이지도 추가해줘.

이렇게 요청하면 한 번에 너무 많은 변화가 생깁니다. 어디에서 문제가 생겼는지 확인하기도 어렵습니다. 디자인 수정과 기능 추가는 나눠서 요청하는 것이 안전합니다.

이번 단계에서는 기능을 추가하지 말고 디자인만 수정해주세요. 로그인, 통계, 관리자 페이지는 나중에 별도로 요청하겠습니다.

세 번째 실수는 사용자보다 내 취향만 말하는 것입니다.

내가 좋아하는 보라색을 많이 써서 화려하게 만들어줘.

개인용 앱이라면 괜찮을 수 있습니다. 하지만 강의 후기 수집 앱이나 예약 문의 앱처럼 다른 사람이 쓰는 앱이라면 사용자의 신뢰와 편의가 더 중요합니다.

포인트 색상은 보라색을 사용하되, 전체 분위기는 수강생이 편하게 후기를 제출할 수 있도록 차분하고 신뢰감 있게 유지해주세요. 보라색은 주요 버튼과 강조 요소에만 사용하고, 배경은 흰색 또는 연한 회색으로 해주세요.

네 번째 실수는 모바일을 나중에 생각하는 것입니다. 초보자의 첫 앱은 주변 사람에게 링크로 공유하는 경우가 많고, 대부분 스마트폰에서 열립니다. 처음부터 모바일 기준을 넣어야 합니다.

PC 화면뿐 아니라 스마트폰 화면에서도 편하게 사용할 수 있게 해주세요. 모바일에서는 입력창과 버튼을 세로로 배치하고, 버튼 높이를 충분히 크게 해주세요. 화면이 좌우로 흔들리거나 가로 스크롤이 생기지 않게 해주세요.

디자인이 마음에 안 들 때 다시 요청하는 법

AI가 한 번에 마음에 드는 디자인을 만들어주지 못해도 괜찮습니다. 바이브 코딩은 한 번에 완성품을 받는 일이 아니라, 결과물을 보면서 대화로 고쳐나가는 과정입니다. 디자인도 마찬가지입니다.

결과가 너무 화려하면 "장식을 줄이고 여백과 정돈감을 높여달라"고 말하면 됩니다. 너무 밋밋하면 "포인트 색상과 카드 구분을 더 명확히 해달라"고 말하면 됩니다. 너무 딱딱하면 "문구와 색상을 부드럽게 해달라"고 요청할 수 있습니다.

다음은 상황별 재수정 프롬프트입니다.

현재 디자인이 너무 화려합니다. 배경 장식과 강한 색상은 줄이고, 흰색 배경과 차분한 포인트 색상 중심으로 정리해주세요. 사용자가 정보를 읽기 쉽도록 여백과 글자 크기를 우선해 주세요.

현재 디자인이 너무 밋밋합니다. 기능은 유지하면서 카드 구분을 더 명확히 하고, 주요 버튼에 포인트 색상을 넣어주세요. 상단 제목 영역도 조금 더 눈에 띄게 만들어주세요.

현재 화면이 모바일에서 답답해 보입니다. 한 화면에 너무 많은 정보를 넣지 말고, 입력 영역과 목록 영역을 세로로 나눠주세요. 버튼은 더 크게 만들고, 카드 사이 여백을 늘려주세요.

현재 디자인이 앱의 사용자와 맞지 않습니다. 이 앱은 [사용자 설명]이 사용하는 앱입니다. [원하는 분위기]에 맞게 색상, 문구, 버튼 스타일을 다시 조정해주세요. 기존 기능은 유지해주세요.

디자인 수정은 감각의 영역처럼 보이지만, 실제로는 관찰과 설명의 영역입니다. 무엇이 마음에 안 드는지 찾고, 그것을 화면 요소로 바꿔 말하면 됩니다.

실습 미션: 내 앱을 세 가지 분위기로 바꿔보기

이번 장의 미션은 간단합니다. 지금까지 만든 앱 중 하나를 골라 세 가지 디자인 톤으로 바꿔보세요. 추천 앱은 할 일 관리 앱, 독서 기록 앱, 프롬프트 보관함 앱입니다. 기능이 단순해서 디자인 차이를 관찰하기 좋습니다.

먼저 다이어리 느낌으로 바꿔봅니다.

이 앱의 기능은 유지하고 다이어리 느낌의 따뜻한 디자인으로 바꿔주세요. 크림색 배경, 둥근 카드, 부드러운 버튼, 넉넉한 여백을 사용해주세요. 개인이 매일 기록하고 싶어지는 차분한 분위기를 원합니다.

다음에는 업무용 SaaS 느낌으로 바꿔봅니다.

이 앱의 기능은 유지하고 업무용 SaaS 느낌의 깔끔한 디자인으로 바꿔주세요. 흰색과 연회색 배경, 파란색 주요 버튼, 카드형 목록, 명확한 제목 체계를 사용해주세요. 빠르게 정보를 확인하고 처리하는 업무 도구처럼 보였으면 합니다.

마지막으로 공공기관 보고서 느낌으로 바꿔봅니다.

이 앱의 기능은 유지하고 공공기관 보고서처럼 단정하고 신뢰감 있는 디자인으로 바꿔주세요. 흰색 배경, 남색 포인트, 명확한 구역 구분, 읽기 쉬운 글자 크기를 사용해주세요. 불필요한 장식은 줄이고 정보 전달을 우선해주세요.

세 결과를 비교해보세요. 같은 기능이어도 분위기에 따라 앱의 성격이 달라진다는 것을 느낄 수 있을 것입니다. 이 경험은 앞으로 앱을 만들 때 매우 중요합니다. 좋은 디자인은 예쁜 장식이 아니라 앱의 목적과 사용자를 더 잘 드러내는 방식입니다.

바로 써먹는 디자인 수정 체크리스트

디자인 수정 프롬프트를 보내기 전에 아래 항목을 확인해보세요.

• 원하는 분위기를 한 단어가 아니라 한 문장으로 설명했는가?

• 앱을 사용할 대상자를 적었는가?

• 색상 방향을 말했는가?

• 여백을 늘릴지 줄일지 말했는가?

• 제목, 설명, 목록의 글자 크기 차이를 요청했는가?

• 목록을 카드형으로 할지 표 형태로 할지 말했는가?

• 주요 버튼과 삭제 버튼의 스타일을 구분했는가?

• 모바일 화면에서 버튼 크기와 화면 폭을 요청했는가?

• 기존 기능을 유지하라고 말했는가?

• 한국어 문구를 자연스럽게 유지하라고 말했는가?

이 체크리스트를 보면 디자인 수정도 결국 작은 기획서에 가깝다는 것을 알 수 있습니다. AI에게 맡기더라도 방향을 정하는 사람은 나입니다.

한 장 요약

디자인 수정 프롬프트의 핵심은 "예쁘게"라는 막연한 표현을 구체적인 화면 요청으로 바꾸는 것입니다. AI는 내 머릿속 취향을 자동으로 알지 못합니다. 그래서 다이어리 느낌, 업무용 SaaS 느낌, 공공기관 보고서 느낌처럼 원하는 분위기를 사용 장면과 함께 설명해야 합니다.

색상, 여백, 글자 크기, 카드 스타일, 버튼 크기는 초보자도 충분히 말할 수 있는 디자인 요소입니다. 전문 용어를 몰라도 "배경은 따뜻하게", "버튼은 크게", "카드는 둥글게", "삭제 버튼은 덜 눈에 띄게"처럼 요청하면 됩니다.

모바일 우선 디자인도 꼭 기억해야 합니다. 많은 사용자는 스마트폰으로 앱을 열어봅니다. 버튼 크기, 화면 폭, 카드 배치, 가로 스크롤 여부를 함께 요청해야 실제로 쓰기 편한 앱이 됩니다.

마지막으로 디자인은 내 취향만의 문제가 아닙니다. 누가 쓰는 앱인지, 어떤 상황에서 쓰는 앱인지에 맞춰 톤을 조정해야 합니다. 독서 기록 앱은 차분한 다이어리처럼, 할 일 관리 앱은 깔끔한 업무 도구처럼, 강의 후기 수집 앱은 신뢰감 있는 설문 화면처럼 보여야 합니다.

다음 장에서는 화면은 그럴듯한데 버튼이 작동하지 않거나, 입력한 내용이 저장되지 않거나, 모바일에서 화면이 깨질 때 어떻게 AI에게 오류 수정을 요청하는지 배웁니다. 디자인을 고치는 것과 마찬가지로 오류도 "안 돼요"가 아니라 "무엇을 했고, 어떤 문제가 생겼는지" 구체적으로 말하는 것이 중요합니다.