AI랑 첫 화면 디자인하기
앱을 만들 때 가장 먼저 손댄 건 첫 화면이었습니다.
사람이 앱을 열고 처음 보는 화면. 여기서 "오 괜찮은데?" 싶어야 다음으로 넘어가거든요. 반대로 첫인상이 별로면 그냥 닫아버립니다. 그래서 첫 화면에 제일 공을 들였어요.
어떤 느낌으로 만들지부터 정했다
저는 화려한 걸 싫어합니다. 버튼이 번쩍거리고, 색이 요란하고, 여기저기 글자가 가득한 화면은 보기만 해도 피곤해요.
그래서 방향을 정했습니다. 최대한 덜어내자. 꼭 필요한 것만 남기고 나머지는 다 비우자. 배경은 눈이 편한 베이지색, 글씨는 차분한 검정, 포인트 색은 딱 하나 주황색만. 이렇게 정해두고 시작했어요.
이건 제가 평소에 좋아하는 디자인 철학이기도 합니다. "적게, 그러나 더 좋게." 요소를 더할 이유를 찾지 말고, 뺄 이유를 찾는 거죠.
AI한테 어떻게 시켰나
방향을 정했으니 AI한테 전했습니다. 이렇게요.
"첫 화면을 만들어줘. 배경은 따뜻한 베이지색. 가운데에 앱 이름을 크게. 그 아래에 한 줄짜리 슬로건. 맨 아래에 시작하기 버튼 하나. 색은 검정과 주황만 써. 화려하지 않고 차분하게."
그랬더니 꽤 그럴듯한 게 나왔어요. 물론 한 번에 완벽하진 않았습니다. 글자가 너무 크거나, 버튼 위치가 어색하거나. 그때마다 "이름을 조금 작게", "버튼을 더 아래로" 하면서 고쳐갔어요.
디자이너의 눈이 빛나는 순간
여기서 제 일이 큰 도움이 됐습니다. AI가 만들어준 화면을 보면 어디가 어색한지 바로 보이거든요.
"여백이 답답하다", "글자 간격이 너무 좁다", "이 색이 살짝 탁하다" 같은 걸 잡아낼 수 있어요. 이건 코딩 실력이 아니라 보는 눈의 문제입니다. 그리고 그 눈은 꼭 디자이너가 아니어도, 평소 예쁜 걸 좋아하고 불편한 걸 못 견디는 사람이면 누구나 가질 수 있어요.
저는 그저 "이게 마음에 든다 / 안 든다"를 정확하게 AI한테 전했을 뿐입니다. 그러면 AI가 그걸 코드로 바꿔줬어요.
처음 나온 화면은 이랬습니다
첫 시도는 정말 평범했어요. 흰 배경에 파란 버튼, 어디서나 본 듯한 회색 카드. AI가 잘못 만든 게 아니라, 제가 원하는 걸 구체적으로 말하지 않았기 때문이었습니다.
그래서 디자인 회사를 운영하며 늘 하던 방식대로 다시 접근했어요. 색상 코드부터 정했습니다. 배경은 따뜻한 오프화이트, 글자는 거의 검정, 포인트 컬러는 주황 하나. 딱 세 가지로 제한하니 AI도 헷갈리지 않고 일관되게 화면을 만들어줬습니다.
여백과 정렬도 숫자로 못 박았어요. 카드 안쪽 여백은 이 정도, 카드 사이 간격은 이 정도처럼요. 디자이너의 감각을 말로 다 설명할 순 없어도, 숫자로 바꿔서 전달하니 AI가 훨씬 정확하게 따라왔습니다.
색상 세 개로 줄인 이유
처음엔 저도 욕심을 냈습니다. 포인트 컬러를 두세 개 넣고 싶었어요. 그런데 화면에 색이 많아질수록 오히려 정신없어 보였습니다. 결국 배경, 글자, 포인트 딱 세 가지로 줄였어요.
디터 람스의 원칙을 떠올렸습니다. "적게, 그러나 더 좋게." 색을 줄이니까 오히려 화면에 있는 정보 하나하나가 더 잘 보였어요. 무엇을 더할지보다 무엇을 뺄지 고민하는 게 디자인의 핵심이라는 걸 다시 느꼈습니다.
이 색상 규칙은 이후 만든 모든 화면에 그대로 적용됩니다. 새 화면을 만들 때마다 이 세 가지 색만 쓰라고 AI한테 미리 알려주면, 전체적으로 통일감 있는 디자인이 유지됩니다.
"AI가 만든 디자인, 진짜 쓸 만해?"
1. 방향만 잘 잡아주면 쓸 만합니다. AI한테 "예쁘게 만들어줘"라고만 하면 평범하게 나와요. 근데 "베이지 배경에 포인트는 주황 하나만"처럼 명확한 방향을 주면 꽤 괜찮은 게 나옵니다. 결국 사람이 방향을 잡아야 해요.
2. 한 번에 완성은 안 됩니다. 처음 나온 화면이 마음에 들 확률은 낮아요. 보고, 고치고, 다시 보고를 몇 번 반복해야 원하는 모습이 됩니다. 그래도 직접 코딩하는 것보다 훨씬 빨라요.
3. 보는 눈만 있으면 누구나 됩니다. 어디가 어색한지 잡아내는 건 코딩 실력이 아니라 감각이에요. 평소에 "이건 좀 별로다" 느낄 줄 안다면, 이미 그 감각이 있는 겁니다.
다음 이야기
첫 화면은 그럭저럭 나왔습니다. 근데 진짜 고생은 이제부터였어요. AI가 만든 코드가 한 번에 제대로 작동하는 일은… 거의 없었거든요. 다음 글에서 그 첫 에러 이야기를 하겠습니다.
