AI로 만든 앱 디자인, 출시 전 이 5가지만 고쳐도 달라집니다

안녕하세요, 디자인 스튜디오 메이드잇투게더 김형주입니다.

"기능은 다 되는데, 왜 이렇게 어설퍼 보이죠?"

요즘 AI 앱 디자인 상담에서 가장 많이 듣는 말이에요. 답부터 말하면, 대부분은 AI 탓이 아니라 화면에 규칙이 없어서예요. 이 글에서는 AI 도구로 만든 화면에서 반복해서 보이는 문제 5가지와, 실제로 다시 디자인한 AS-IS·TO-BE 화면으로 고치는 법을 정리했습니다.

3주 만에 앱을 만들었는데, 반응이 애매하다면

요즘 초기 팀의 첫 서비스는 상당수가 AI 도구로 만들어져요. 개발자 한두 명이 몇 주 만에 로그인부터 결제까지 다 붙입니다. 정말 빨라졌어요.

그런데 베타 테스트를 돌려 보면 비슷한 반응이 돌아옵니다. "괜찮은데… 뭔가 어색해요." 어디가 어색한지 물어보면 테스터도 정확히 말하지 못해요. 만든 팀도 마찬가지고요.

문제는 AI가 아니라 '규칙이 없는 것'

AI가 디자인을 못 해서 생기는 문제가 아니에요. 글자 크기, 색, 버튼 모양에 정해진 규칙이 없으니 AI가 화면마다 그때그때 정하는 거예요. 그래서 화면 하나하나는 그럴듯한데, 이어서 보면 다른 앱처럼 보입니다.

이걸 그대로 두면 손해가 생각보다 커요.

• 사용자: 어디를 봐야 할지 몰라 첫 화면에서 떠납니다

• 투자 미팅: 데모를 보는 순간 "아직 초기네"라는 인상이 남아요

• 나중의 비용: 화면이 50개를 넘어가면 하나씩 고치는 것보다 다시 만드는 게 빠를 때가 많습니다

다행히 대부분은 아래 5가지에서 시작되고, 기능을 바꾸지 않고 화면만 정리해도 달라져요.

1. 가장 중요한 정보에 강약이 없다

AI는 화면 전체에 비슷한 크기의 글자를 쓰고, 빈 곳은 큰 그림이나 색 덩어리로 채우는 경우가 많아요. 그러다 보니 사용자가 이 화면에서 꼭 봐야 할 정보가 오히려 작아집니다.

▲ 거리 알림 앱 '바짝바짝'. 이 화면의 주인공은 캐릭터가 아니라 "지금 몇 cm인지"예요.

이렇게 고쳐요. 화면마다 "사용자가 가장 먼저 봐야 할 것 하나"를 정하고, 그걸 가장 크게 둡니다. 위 화면에서는 거리 숫자 34cm를 크게, 설명은 작고 연하게 바꿨어요. 제목 20px 안팎, 본문 14px, 보조 설명 12px처럼 단계를 정해 두면 화면 구조가 저절로 보여요.

2. 한 화면에 다 보여주려 한다

AI에게 기능을 설명하면 그 기능을 전부 첫 화면에 꺼내 놓아요. 필터, 옵션, 안내 문구가 화면 절반을 차지하고, 정작 사용자가 보러 온 내용은 아래로 밀려납니다. 공간이 모자라니 글자도 8~10px까지 작아지고요.

▲ 러닝 대회 목록 화면. 필터 네 줄을 칩 한 줄로 접으니 대회 목록이 바로 보여요.

이렇게 고쳐요. 자주 쓰는 것만 꺼내 두고 나머지는 접습니다. 필터는 선택한 것만 칩으로 보여주고, 전체 필터는 버튼 하나 뒤로 넣어요. 본문은 최소 13px, 보조 정보도 12px 아래로 내리지 않습니다.

3. 가장 중요한 버튼이 눈에 안 띈다 (중요!)

AI는 버튼의 중요도를 잘 구분하지 못해요. '견적 요청'이나 '시작하기'처럼 서비스의 핵심 행동을 담은 버튼이 배너와 카테고리 아래로 밀려 있고, 화면 절반을 차지하는 배너가 시선을 가져갑니다.

▲ 청소 견적 서비스 홈. 이 앱에서 가장 중요한 행동은 '무료 견적 요청'이에요. 그래서 첫 화면 가장 잘 보이는 곳으로 올렸어요.

이렇게 고쳐요. 한 화면에 진한 핵심 버튼은 하나만. 높이 48~52px, 글자 16px으로 키우고 가장 진한 색을 줍니다. 나머지 버튼은 테두리만 있는 보조 버튼으로 내려요.

4. 아이콘과 색이 제각각이다

아이콘마다 스타일과 색이 다르면 화면이 산만해 보여요. 빨간색처럼 강한 색은 경고나 오류로 읽히기도 하고요.

이렇게 고쳐요. 아이콘은 한 가지 스타일로 맞추고, 색은 의미가 있을 때만 씁니다. 위 청소 서비스는 카테고리 아이콘을 같은 질감으로 통일했고, 러닝 대회 목록은 거리 태그(5K, 10K, Half, Full)마다 색을 하나씩 정해 어느 화면에서나 같게 썼어요. 브랜드 색 1개, 회색 단계, 오류용 빨강. 이 정도면 충분해요.

5. 빈 화면과 오류 화면이 없다

AI에게 화면을 만들어 달라고 하면 대부분 데이터가 꽉 찬 '잘 된 경우'만 그려줘요. 그런데 사용자가 처음 만나는 건 빈 화면입니다. 가입 직후의 기록 화면, 결과가 0개인 검색. 이 화면이 하얗게 비어 있으면 사용자는 서비스가 고장 났다고 느껴요.

이렇게 고쳐요. 주요 화면마다 '처음 들어왔을 때', '결과가 없을 때', '실패했을 때'를 따로 그려 두세요. 빈 화면에는 지금 할 수 있는 행동 하나를, 오류 화면에는 원인과 다시 시도 버튼을 넣으면 됩니다.

출시 전 5분 점검

• ☐ 휴대폰을 팔 길이만큼 떨어뜨리고 봤을 때, 가장 먼저 보이는 게 이 화면의 핵심 정보인가요?

• ☐ 화면에 쓰인 글자 크기가 5종류를 넘지 않나요?

• ☐ 12px보다 작은 글자가 있나요?

• ☐ 같은 역할의 버튼이 화면마다 같은 색, 같은 모양인가요?

• ☐ 데이터가 하나도 없는 상태의 화면을 본 적 있나요?

AI에게 디자인 규칙을 알려주는 법

규칙을 정했다면 AI에게 그대로 전달하면 돼요. 대화를 시작할 때 붙여 넣거나, 도구의 기본 지침에 저장해 두세요.

이 앱의 디자인 규칙
- 글자 크기는 24, 20, 16, 14, 12만 쓴다. 12보다 작은 글자는 쓰지 않는다.
- 섹션 제목은 20 굵게, 본문은 14 보통, 보조 설명은 12 회색.
- 색은 메인 1개, 회색 4단계, 성공 초록, 오류 빨강만 쓴다.
- 한 화면에 진한 메인 버튼은 하나만. 높이 52, 글자 16.
- 아이콘은 한 가지 스타일로 통일한다.
- 목록 화면은 데이터가 없을 때의 화면도 함께 만든다.

포인트는 숫자로 적는 것이에요. "깔끔하게", "눈에 띄게"는 AI가 매번 다르게 해석하지만, "16px, 굵게"는 그대로 따릅니다.

규칙으로 안 되는 순간도 있어요

규칙만으로 해결되지 않는 문제도 있어요. 화면 순서 자체가 어색할 때, 핵심 기능까지 가는 길이 너무 길 때, 첫인상이 경쟁 서비스와 구분되지 않을 때예요. 이건 크기나 색이 아니라 '무엇을 먼저 보여줄지'의 문제라서, 사용자와 서비스를 함께 보는 사람이 판단해야 합니다.

마치며

AI 덕분에 만드는 속도는 정말 빨라졌어요. 그만큼 이제는 "얼마나 빨리 만드느냐"보다 "얼마나 정돈돼 보이느냐"에서 차이가 납니다. 다행인 건, 그 차이의 대부분이 규칙 몇 줄로 메워진다는 거예요.

AI로 만든 서비스가 어딘가 어설프게 느껴진다면, 화면 몇 장만 보내 주세요. 어디를 고치면 되는지 무료로 봐 드립니다.
→ mit@madeit.kr

김형주 · 메이드잇투게더 대표
2015년부터 스타트업의 브랜딩과 UI/UX를 함께 만들고 있습니다.