GPT Astra로 60만 개 레퍼런스 앱 디자인? 코덱스+Mobbin 활용 꿀팁!

GPT 아스트라, 웹/앱 디자인에 얼마나 쓸만할까?

최근에 나온 GPT 아스트라라는 AI가 엄청 좋다고 난리인데, 주로 3D나 게임 쪽 이야기만 많고 정작 우리가 많이 쓰는 앱이나 웹 디자인 쪽으로는 이야기가 별로 없더라고. 그래서 이번 영상에서는 아스트라가 웹/앱 디자인할 때 얼마나 괜찮은지, 뭐가 부족한지 직접 써보면서 알아볼 거야.

핵심은 이거야:

• 레퍼런스 없이: 아무 정보도 안 주고 디자인하라고 했을 때 얼마나 잘하는지
• 레퍼런스 주고: 참고할 만한 자료를 주고 나서 얼마나 더 잘하는지

이 두 가지 과정을 보면서 아스트라의 디자인 실력을 파헤쳐 볼게.

1. AI 디자인, 사람들이 뭐라고 할까?

테스트 시작 전에 사람들이 아스트라의 앱/웹 디자인 능력을 어떻게 평가하는지 찾아봤어. AI가 만든 디자인에 대한 사람들의 의견은 크게 두 가지로 나뉘더라.

• 긍정적인 반응: "UI 생성을 진짜 잘한다", "디자인이 마음에 든다", "현업 디자이너보다 잘한다"는 의견도 있었어.
• 부정적인 반응: "초록색 계열로만 치우친다", "모든 AI 디자인이 똑같다", "평범한 AI 수준에 머물러 있다"는 의견도 있었지.

결국 AI가 디자인을 얼마나 잘하는지는 남들 말만 듣고는 알기 어렵다는 거야. 내가 직접 써보고 내 프로젝트에 맞는지, 내 눈에 괜찮은지가 제일 중요하거든.

2. 레퍼런스 없이 디자인 시도! (첫 번째 라운드)

이번 테스트 주제는 "고등학생 대상 영어 학습 앱"이야.

프롬프트: "고등학생 영어 공부를 도와주는 앱/웹을 만들어줘. 대상은 한국 고등학생이고, 내장된 스킬 외에는 아무것도 쓰지 마."

일부러 이렇게 모호하게 준 이유는, AI가 얼마나 스스로 기획하고 빈칸을 잘 채우는지 보고 싶어서야.

결과:

솔직히 좀 놀랐어. 예전 AI 디자인은 뭔가 어설프고 AI 티가 많이 났는데, 이건 꽤 그럴싸하더라고. 디자인 기본기가 어느 정도 잡혀 있었어.

• 시각적인 부분: 중요한 부분에는 색도 넣고 일러스트도 넣고 버튼도 눈에 띄게 해서 강약 조절을 잘했어.
• 기획적인 부분: 영어 공부의 핵심인 '독해'와 '단어 공부'를 메인으로 잡은 게 보였어. 동기 부여를 위한 목표 달성 같은 요소도 넣었더라고.

아쉬운 점:

• 듣기, 쓰기 빠짐: 영어 공부에 듣기나 쓰기도 중요한데, 이건 빠져 있었어.
• 폰트 사이즈: 글씨가 너무 작아서 읽기 어려울 정도였어. 특히 작은 글씨는 8픽셀까지 내려가더라고. 이건 거의 안 보라는 수준이야.
• 컬러: 고등학생 대상인데 컬러가 너무 차분하고 파스텔톤이라 좀 지루하게 느껴질 수 있겠다는 생각이 들었어. AI가 자체 팔레트 안에서만 고르는 느낌이었지.
• 색 대비: 연한 회색 글씨 같은 건 너무 연해서 잘 안 보일 수 있어. 컬러 체커 같은 걸로 확인해 보면 좋았을 거야.

모바일 디자인:

PC 화면의 왼쪽 메뉴가 아래로 내려오는 등 반응형 처리는 무난했어. 다만 폰트가 작아서 모바일에서도 읽기 어려운 건 똑같았지.

총평 (첫 번째 라운드):

아무 정보도 안 주고 이 정도 결과물이 나온 건 꽤 괜찮았어. 디자인의 기초가 탄탄해서 여기서부터 시작해도 좋을 것 같아. (참고로 이 결과물을 만드는 데 약 21분, 5달러 정도 들었대.)

3. 레퍼런스를 주고 디자인 개선! (두 번째 라운드)

첫 번째 결과물에서 아쉬웠던 점들을 개선하기 위해 이번엔 참고할 만한 자료를 줬어.

프롬프트: "첫 번째 버전을 업데이트해줘. 모빈(레퍼런스 플랫폼)을 참고해서 게임적인 요소를 넣고, 고등학생들이 몰입할 수 있게 개선해줘. 브랜딩, 컬러, 디자인 시스템 등도 타겟에 맞게 네가 판단해서 업데이트해줘. 아이콘이나 일러스트는 GPT 2.5 이미지 생성 모델로 마음껏 만들어주고, 어떤 레퍼런스를 썼는지 보고서도 써줘."

결과:

확실히 달라졌어!

• 컬러: 눈에 확 띄는 컬러를 사용해서 훨씬 에너지 넘치고 몰입감 있게 바뀌었어.
• 게임 요소: 문제를 풀면 경험치가 쌓이고, 퀴즈를 계속 맞추면 콤보가 쌓이는 등 게임적인 요소가 추가됐어.
• 브랜딩: 3D 이미지를 활용해서 입체적이고 시각적으로 기억에 남는 디자인이 됐어.
• 레퍼런스 보고서: 어떤 자료를 왜 참고했고 어떻게 적용했는지 보고서도 잘 써줬어. (나이키 배지, 듀오링고 점수 시스템 등)

아직 아쉬운 점:

• 폰트 사이즈: 여전히 글씨가 작다는 문제는 해결되지 않았어. (이건 내가 방향 제시를 안 해줘서 그런 부분도 있어.)
• 배지 디자인: 배지 요소가 들어간 건 좋은데, 디자인이 너무 평범했어. 좀 더 특별하고 소유욕을 자극하는 디자인이면 좋겠어.
• 소소한 인터랙션: 단어 카드 뒤집기 같은 기능이 있는데, 실제로 카드가 뒤집히는 애니메이션 같은 게 있으면 더 재미있을 것 같아.

총평 (두 번째 라운드):

첫 번째보다 훨씬 내가 원하는 방향으로 발전했어. 게임 요소나 몰입감을 높이는 데 집중한 게 보였지. (이 결과물을 만드는 데 약 35분, 10~12달러 정도 들었대.)

4. 마지막 개선 시도! (세 번째 라운드)

마지막으로 폰트 사이즈와 인터랙션, 배지 디자인을 더 개선해 보기로 했어.

프롬프트: "작은 글씨가 잘 안 읽히는 경향이 있으니, 모빈 레퍼런스를 참고해서 바디 폰트 이하의 베스트 프랙스를 확인하고 보고서를 작성해줘. 그리고 단어 카드 뒤집기 기능에 실제 카드가 뒤집히는 인터랙션을 적용해줘. 21대부(레퍼런스 사이트)에서 참고할 만한 예시를 가져와줘. 마지막으로 마이 배지가 너무 단순하니, 모빈에서 게임 배지 관련 레퍼런스를 찾아서 업데이트해줘."

결과:

• 폰트 사이즈: 글씨가 훨씬 잘 읽히게 개선됐어. 다만 폰트가 커지면서 화면이 좀 복잡해진 느낌도 있어서, 불필요한 텍스트는 줄이는 것도 고려해볼 만해.
• 카드 뒤집기: 단어 카드가 실제로 뒤집히는 인터랙션이 적용됐어.
• 배지 디자인: 배지 디자인 퀄리티가 확 올라갔고, 마우스를 올렸을 때 애니메이션도 추가됐어.
• 브랜딩 일관성: 3D 이미지 요소를 계속 써서 디자인적인 일관성도 유지했어.

총평 (세 번째 라운드):

전반적으로 퀄리티가 많이 올라갔고, 내가 요청한 부분들이 잘 반영됐어.

GPT 아스트라, 디자인에 얼마나 쓸만할까?

GPT 아스트라는 내가 예상했던 것보다 디자인 능력이 훨씬 좋았어. 레퍼런스를 활용하는 능력도 괜찮았고.

하지만 명심해야 할 점:

• 주관적인 판단: AI가 디자인을 해주지만, 최종 판단과 취향은 사람이 해야 해.
• AI스러움: 많은 사람들이 같은 AI를 쓰다 보면 디자인이 비슷해질 수 있어. 결국 차별점을 만들려면 레퍼런스를 잘 활용하고, 내 판단과 취향을 더하는 게 중요해.

앞으로의 기대:

다른 AI 모델들과 비교했을 때 누가 더 디자인을 잘하는지, 또 어떤 카테고리(이커머스, 블로그 등)에 더 강점이 있는지 궁금해. 그래서 이런 궁금증을 해결해 줄 수 있는 AI 디자인 블라인드 테스트 앱을 만들고 있어. 두 개의 다른 AI가 만든 디자인을 비교해보고, 어떤 모델이 만들었는지, 비용은 얼마나 들었는지 등을 알 수 있게 할 예정이야.

이 앱에 관심 있는 사람들은 댓글에 링크를 남겨놨으니 신청해봐! 얼리버드로 신청하면 무료로 사용해볼 수 있을 거야.