AI로 보기 좋은 앱 디자인하는 법

AI에게 보기 좋은 앱을 만들게 하려면 “예쁘게 만들어 줘”라고 하지 말고, 디자이너가 원할 만한 정보를 주세요. 마음에 드는 레퍼런스 두세 개, 이름을 붙인 디자인 방향, 글꼴·색상·간격에 대한 구체적인 규칙이에요. 그다음 화면 하나를 만들어 원하는 모습이 될 때까지 다듬고, 같은 체계를 다른 화면에도 적용하게 하세요. AI 특유의 느낌은 대부분 모호한 프롬프트가 평균적인 결과를 만들기 때문에 생겨요. 구체적인 입력을 주면 구체적인 디자인이 나와요.

AI 디자인이 평범해 보이는 이유

AI에게 “현대적이고 깔끔한 SaaS 대시보드”를 요청하면, 지금까지 본 모든 대시보드의 통계적 중간값을 내놓아요. 같은 산세리프 글꼴, 보라에서 파랑으로 넘어가는 그라데이션, 부드러운 그림자가 있는 둥근 카드, 원 안에 들어간 이모지 같은 아이콘, 그리고 “당신의 업무, 간단하게”라고 적힌 가운데 정렬 히어로 영역이 나와요. 어느 하나가 잘못된 선택은 아니에요. 문제는 그 어떤 선택도 여러분의 제품을 위해 고른 것이 아니라는 점이에요.

좋은 디자인은 대부분 결정으로 이루어져요. 여러분의 일은 앱에 개성을 주는 몇 가지 결정을 직접 내리고, 나머지 수많은 작은 결정은 AI가 일관되게 처리하도록 맡기는 거예요.

1단계: 프롬프트 전에 레퍼런스 모으기

20분 정도 시간을 들여 여러분의 제품에 어울리는 앱이나 웹사이트를 두세 개에서 네 개 정도 모아 보세요. 좋은 출처는 사용자들이 이미 쓰는 제품, 디자인 갤러리, 인접 분야 회사의 사이트예요.

각 레퍼런스마다 무엇이 마음에 드는지 평이한 말로 적어 두세요.

• “여백이 많고, 콘텐츠는 좁은 열에 있으며, 큰 숫자 위에 작은 회색 라벨이 있다.”
• “얇은 구분선이 있는 촘촘한 표, 카드 그림자 없음, 실행 버튼에만 강조 색상 하나.”
• “큰 세리프 제목, 따뜻한 오프화이트 배경, 일러스트보다 사진.”

그다음 이 설명을 AI에 전달하고, 도구가 이미지를 받는다면 스크린샷도 첨부하세요. 제품 자체가 아니라 특성에서 영감을 얻으세요. 다른 회사의 레이아웃, 브랜딩, 문구를 통째로 복사하면 법적 위험과 신뢰도 문제가 함께 생겨요.

2단계: 디자인 방향을 정하고 이름 붙이기

디자인 방향은 분위기를 짧게 설명한 것이에요. AI가 모든 결정을 내릴 때 거르는 기준이 되어 주죠. 잘 맞는 방향 몇 가지는 다음과 같아요.

첫 프롬프트에 방향과 앱의 대상 사용자를 함께 넣으세요.

독립 요가 스튜디오를 위한 예약 앱을 만들어 줘. 디자인 방향: 인쇄된 스튜디오 시간표처럼 차분하고 미니멀하게. 따뜻한 오프화이트 배경, 거의 검정에 가까운 글자, 버튼과 선택 상태에는 차분한 세이지 그린 강조 색 하나. 제목은 세리프, 본문은 깔끔한 산세리프. 넉넉한 간격, 그라데이션 없음, 그림자 없음, 이모지 없음. 모바일 우선.

3단계: 규칙 정하기 — 글꼴, 색상, 간격

이 세 가지가 시각적 완성도의 대부분을 결정해요. 이 부분을 명확하게 정해 주는 것이 가장 큰 개선 효과를 줘요.

글꼴

• 글꼴 한두 개만 쓰기. 제목용 글꼴과 본문용 글꼴 하나, 또는 한 가족의 여러 굵기를 쓰세요.
• 글자 크기 체계 정하기. 14, 16, 20, 28, 40px처럼 몇 가지 크기만 정해서 모든 곳에서 일관되게 쓰세요. 컴포넌트마다 제각각 고르게 두지 마세요.
• 읽기 편한 본문. 웹 기준 약 16px, 줄 간격 1.5 정도, 긴 글은 한 줄에 60~75자 정도가 좋아요.
• 위계는 색이 아니라 굵기와 크기로. 제목은 더 굵고 크게, 보조 텍스트는 더 작고 옅은 회색으로 하세요.

색상

• 대부분 중립색 쓰기. 배경, 표면, 테두리, 텍스트의 회색 계열이 대부분의 일을 해요.
• 행동과 선택 상태에는 강조 색 하나. 명확한 역할이 있을 때만 두 번째 색을 추가하세요.
• 의미 색은 성공, 경고, 오류에만. 그 외에는 쓰지 마세요.
• 대비. WCAG 2 기준은 일반 본문 텍스트에 최소 4.5:1, 큰 텍스트에 3:1 이상의 명도 대비를 요구해요. 흰 배경의 연한 회색 글자는 자주 기준에 못 미치니, AI에게 확인해 달라고 하세요.
• 다크 모드는 필요하다면 색을 뒤집는 것이 아니라 의도를 가지고 설계하세요.

간격과 레이아웃

• 간격 단위 정하기. 예: 4, 8, 12, 16, 24, 32, 48, 64px. 모든 요소가 이 단위에 맞게 배치되어야 해요.
• 정렬. 가장자리를 맞추고, 콘텐츠는 격자나 일관된 최대 너비 열에 두세요.
• 근접성. 관련 있는 것은 가까이, 관련 없는 것은 멀리. 이 규칙 하나로 대부분의 복잡한 화면이 정리돼요.
• 컨테이너는 줄이기. 모든 것에 카드가 필요하지는 않아요. 테두리, 구분선, 여백으로 콘텐츠를 묶는 편이 더 차분하게 보여요.

한 번에 체계를 세워 두는 프롬프트 예시는 다음과 같아요.

화면을 더 만들기 전에 작은 디자인 시스템을 세우고 모든 곳에 적용해 줘. 글자 크기 체계는 14/16/20/28/40px, 본문 줄 간격 1.5, 간격 단위는 4/8/12/16/24/32/48px, 중립색은 거의 흰색에서 거의 검정까지, 강조 색 하나(#3F6B5A)는 기본 행동 버튼에만, 빨간색은 오류에만. 버튼, 입력창, 카드는 같은 모서리 반경을 공유하게 해 줘. 모든 텍스트가 WCAG AA 대비 기준을 충족하는지 확인해 줘.

코드를 이해하는 빌더를 쓴다면 이것이 보통 디자인 토큰이 돼요. CSS 변수나 Tailwind 테마 같은 것들이요. 그러면 나중에 바꿀 때 한 곳만 수정하면 돼요.

4단계: 화면 하나를 먼저 제대로 만들기

화면 열두 개를 한꺼번에 생성한 뒤 전부 고치려고 하지 마세요. 사용자가 가장 많이 보는 화면, 보통 대시보드나 메인 목록을 고르고, 제대로 될 때까지 반복하세요. 그런 다음 이렇게 요청하세요.

대시보드를 다른 모든 페이지의 기준으로 삼아 줘. 같은 헤더, 간격, 글자 크기, 버튼 스타일, 표 스타일을 적용해. 설정과 예약 페이지도 여기에 맞춰 업데이트해 줘.

완성된 기준 화면은 어떤 형용사보다도 여러분의 취향을 더 잘 전달해요.

5단계: 구체적이고 작은 요청으로 반복하기

AI에게 하는 피드백은 주니어 디자이너에게 하는 피드백과 같아요. 구체적이고, 한 번에 한 영역만 다루며, 무엇을 유지할지 분명히 말해야 해요.

항상 무엇을 유지할지도 함께 말하세요. “모든 경로, 문구, 기능은 그대로 유지해 줘”처럼요. 그래야 시각적 수정 과정에서 기능이 조용히 사라지는 일을 막을 수 있어요. 다음 요청으로 넘어가기 전에 휴대폰 크기 화면에서 변경 사항을 확인하고, 작은 화면에서 좋은 모습이 어떤지는 모바일 친화적인 웹 앱 만드는 법을 참고하세요.

6단계: 평범함과 완성도를 가르는 세부 요소

구조가 제대로 잡히면 다음의 작은 요소들이 앱을 완성된 느낌으로 만들어 줘요.

• 빈 상태. 데이터가 없는 신규 사용자가 보는 화면. 빈 표 하나만 두지 말고, 짧은 설명과 분명한 행동 버튼 하나를 제공하세요.
• 로딩 상태. 어디에나 스피너를 두기보다 실제 콘텐츠 모양을 닮은 스켈레톤을 쓰세요.
• 오류 상태. 원인이 된 입력란 옆에 쉬운 말로 된 메시지를 두세요.
• 마우스 오버, 포커스, 눌림 상태. 상호작용하는 모든 요소에 필요해요. 포커스 링은 키보드 사용자에게 중요해요.
• 실제 콘텐츠. “Lorem ipsum”이나 “홍길동” 같은 자리 표시 텍스트를 현실적인 문구와 데이터로 바꾸세요. 자리 표시 콘텐츠는 레이아웃 문제를 가려요.
• 하나의 아이콘 세트. 한두 가지 크기로, 선 굵기를 일관되게 쓰세요.
• 목적이 있는 이미지. 일반적인 스톡 사진보다 제품, 장소, 사람의 실제 사진이 나아요. 스톡이나 생성 이미지를 쓴다면 스타일을 일관되게 맞추세요.
• 문구. “제출” 대신 “수업 예약”처럼 짧고 구체적인 라벨이 색상 선택만큼이나 완성도를 높여요.

흔한 실수

• 한 번의 프롬프트로 전부 다시 디자인하기. 큰 재작업은 회귀 버그를 만들어요. 페이지 단위로 진행하세요.
• 강조 색이 너무 많음. 모든 것이 강조되면 아무것도 강조되지 않아요.
• 모든 것을 가운데 정렬. 가운데 정렬된 텍스트는 제목 외에는 훑어 읽기 어려워요. 대부분의 콘텐츠는 왼쪽 정렬하세요.
• 작고 대비가 낮은 글자. 큰 모니터에서는 세련돼 보여도 햇빛 아래 휴대폰에서는 읽기 어려워요.
• 위계보다 장식. 가장 중요한 행동이 분명하지 않은 화면은 그라데이션이나 그림자로 고칠 수 없어요.
• 랜딩 페이지 무시하기. 많은 제품에서 랜딩 페이지가 첫인상이에요. 전환되는 랜딩 페이지 만드는 법을 참고하세요.

디자인 외의 프롬프트 패턴이 더 궁금하다면 AI 앱 빌더용 프롬프트 작성법을 읽어 보세요. 여러분의 작업 자체가 제품인 디자인이나 사진 포트폴리오라면 포트폴리오 웹사이트 만드는 법에서 프레젠테이션을 더 깊이 다뤄요.

Mythex로 디자인하기

Mythex에서는 채팅으로 디자인을 설명하고, 실시간 미리보기에서 결과를 보고, 다음 수정 전에 휴대폰 크기 화면을 확인할 수 있어요. 문서에는 이를 위한 짧은 패턴이 있어요. 무엇을 바꾸고 무엇을 유지할지 정하는 디자인 및 UI 프롬프트와, 기능을 잃지 않고 페이지를 한 번에 하나씩 새로 고치는 UI 재디자인이에요. Mythex는 채팅에서 스톡 사진을 찾거나 이미지를 생성해서, 요청하면 앱에 넣을 수도 있어요. 메인 히어로 이미지, 배경, 공유용 이미지 등이 가능해요. 수정이 잘못되면 그 전의 체크포인트로 되돌리세요. 기존 디자인에서 시작하고 싶다면 템플릿을 둘러보는 것도 좋아요.

자주 묻는 질문