GPT 아스트라, 앱 디자인 능력은?

에릭은 이를 통해 산출물 제작 과정과 기획 역량을 심층적으로 확인했다.

에릭은 "레퍼런스를 주지 않았을 때랑 또 레퍼런스를 줬을 때 그 과정을 어떻게 밟는지 산출물을 어떻게 만드는지 살펴보도록 하겠습니다"라고 테스트의 목적을 설명했다.

긍정적 평가는 UI 생성 능력이 뛰어나고 현업 디자이너보다 디자인을 잘한다는 의견이 많았다.

반면, 부정적 평가로는 초록색 위주의 단조로운 색상과 표준적인 'AI 슬롭(Slop)' 디자인이 반복된다는 지적이 있었다. 에릭은 "GPT6 아스트라는 UI 생성을 정말 잘한다. 어 디자인이 마음에 든다. 어 심지어 현업에 있는 디자이너보다 더 디자인을 잘한다. 이런 이야기를 하고 있어요. 그런데 또 반대로는 부정적인 의견들도 있었는데요. 역시나 초록색 계열로 치우쳐져 있더라. 표준적인 모든 AI 슬록을 만들어 놨다"고 언급하며 양측의 의견을 전했다.

첫째, 레퍼런스 리서치 능력이다.

둘째, 기획적인 능력으로 유저 플로 설계 능력을 본다. 셋째, 시각적 표현 및 QA 능력으로 최종 결과물의 완성도를 평가한다. 에릭은 "세 가지를 중점적으로 볼 겁니다. 첫째는 레퍼런스 리서치를 얼마나 잘하는지 볼 거고요. 그다음에 기획적인 능력, 시각적인 표현 능력을 볼 겁니다"라고 강조했다.

한국 고등학생을 대상으로 하는 영어 학습 앱 제작을 요청하며, 내장된 스킬 외에는 아무것도 사용하지 말라는 제약 조건을 부여했다. 이는 AI의 빈칸 채우기 능력과 기획 판단력을 측정하기 위함이었다.

에릭은 "고등학생 영웅부를 도와주는 앱 웹을 만들어 보자. 대상은 한국의 고등학생이고 내장된 스킬 외에는 아무것도 쓰지 마. 이렇게 이야기했습니다. 아, 보시면 아시겠지만 일부러 이렇게 추상적으로 줬어요. 구체적인 디테일이 없습니다. 왜냐면 디자인 능력뿐만 아니라 기획 능력도 보고 싶었기 때문에 그래요"라고 설명했다.

아스트라가 생성한 디자인은 시각적 위계에서 힘을 실으려는 부분과 그렇지 않은 부분을 잘 구분했다. 특히 '투데이스픽' 섹션에서는 색상, 일러스트레이션, CTA(Call To Action)를 적절히 배치하여 강조 효과를 높였다.

이는 아마추어 수준을 넘어서는 디자인 기본기를 보여주며, 화면 속 다른 요소들보다 훨씬 눈에 잘 띄는 효과를 냈다.

아스트라는 추상적인 '영어 앱' 요청에도 불구하고 독해와 단어 공부를 메인 기능으로 파악했다. 이는 영어 학습의 큰 틀을 잘 이해한 것으로 평가된다.

그러나 듣기와 쓰기 기능이 누락된 점은 아쉬움으로 남는다. 학습 목표, 주간 완료 현황 등 동기 부여 요소를 포함하여 사용자의 지속적인 학습을 유도하려는 노력이 엿보였다.

모바일 반응형 처리는 PC 버전의 좌측 내비게이션을 모바일 하단으로 이동시키는 등 무난하게 이루어졌다. 이는 전반적으로 모바일 환경에 적합한 디자인 전환을 보여준다.

하지만 한글 산세리프와 영어 세리프 폰트 조합의 효율성은 있었으나, 8픽셀 수준으로 너무 작게 설정된 폰트 사이즈는 가독성을 크게 떨어뜨리는 아쉬운 부분으로 지적됐다.

아스트라가 생성한 디자인에서 폰트 사이즈가 작게 처리되는 경향이 자주 발견됐다. 이는 가독성 저하의 주요 원인으로 작용했다.

특히 연한 회색 폰트를 사용한 부분이 많아 전체적인 가독성이 더욱 떨어졌다. 에릭은 이러한 문제 해결을 위해 컨트라스트 체커(Contrast Checker) 활용을 권장했다.

고등학생을 타겟으로 한 앱임에도 불구하고 디자인 전반에 파스텔 톤 위주의 차분한 색상이 사용됐다. 에릭은 "타겟이 고등학생이잖아요. 어 이런 걸 감안했을 때 조금 더 에너지 레벨이 있는 컬러를 썼으면 좋겠다는 생각이 들었어요"라며 아쉬움을 표현했다.

이는 AI가 자체 팔레트 내에서만 색상을 선택하는 단점으로 보이며, 상황에 맞는 색상 선택 능력의 부족을 시사한다.

고등학생 사용자의 몰입감을 높이고 지속적인 학습을 유도하기 위해 게임적 요소 추가를 제안했다. 에릭은 "이 고등학생들이 사용하는 앱이니까 조금 더 게임처럼 몰입할 수 있고 재미적인 요소가 있으면 좋겠다라는 생각이 들었어요"라고 말했다.

단순 학습을 넘어, 게임과 같은 보상 체계를 도입하여 학습 경험을 더욱 재미있게 만들 필요가 있다고 분석했다.

레퍼런스나 특정 스킬을 제공하지 않은 상태에서 아스트라가 생성한 첫 번째 디자인은 매우 준수한 결과물로 평가됐다. 에릭은 "제가 아무런 스킬이나 레퍼런스를 주지 않은 상태에서 이걸 만들어 보라고 했어요. 어 그런데 그런 점을 감안한다면 굉장히 좋은 결과물을 만들었다고 생각을 합니다"라고 밝혔다.

이 작업에 소요된 시간은 약 21분, 추정 비용은 약 5달러였다. 이는 기초 파운데이션(Foundation)으로서 충분히 활용 가능한 수준임을 입증했다.

에릭은 "모빙 같은 경우는 MCP를 제공합니다. 여기 설정해서 MCP를 누르면은 내가 쓰고 있는 코딩 툴을 선택하실 수 있고"라고 설명했다. 플러그인 설정에서 MCP 서버 주소를 입력하면 간편하게 연동이 가능하다.

2차 개선 작업에서는 모빈 레퍼런스 리서치를 활용하여 게임적 요소를 추가하고, 고등학생들이 몰입할 수 있는 경험으로 디자인을 개선하도록 요청했다. 또한 타겟층에 맞는 브랜딩 및 컬러 시스템 재설계를 지시했다.

아이콘 제작에는 이미지 생성 모델을 활용하도록 했으며, 사용한 레퍼런스에 대한 보고서 작성을 요구했다.

에릭은 "모빙 레퍼런스 리서치를 활용해서 지금보다 조금 더 게임적인 요소 등을 넣고 고등학생들이 몰입발할 수 있는 경험으로 개선을 하면 좋겠어"라고 구체적인 개선 방향을 제시했다.

에릭은 "확실히 메인 컬러랑 세컨드 컬러가 눈에 확 들어오는 걸 쓴 게 느껴집니다"라고 평가했다.

버튼에 볼록 효과와 마우스 오버 애니메이션을 적용하여 인터랙션을 강화했고, 3D 이미지를 활용한 브랜딩으로 앱의 개성을 더했다. 경험치 및 콤보 시스템 등 게임적 요소를 도입하여 학습 동기를 부여하려는 시도도 돋보였다.

3차 이터레이션에서는 작은 글씨 텍스트의 가독성 개선을 위해 Mobbin 레퍼런스를 참고하고, 베스트 프랙티스 보고서 작성을 요청했다. 에릭은 "전체적으로 작은 글씨의 텍스트들이 잘 읽히지 않는 경향이 있어 바디 폰트나 그 이하의 폰트에 대해서 보빈 레퍼런스를 참고하고 베스트 프랙티스가 뭔지 확인하고 보고서를 작성해 줘"라고 구체적으로 지시했다.

또한, 카드 뒤집기 인터랙션을 위해 21st.dev의 예시를 활용하고, 게임 배지 디자인을 리뉴얼하도록 요구하여 세부적인 사용자 경험을 강화하고자 했다.

에릭은 "폰트 사이즈 같은 경우는 확실히 기존 대비해서 좀 더 가독성이 많이 올라간 거를 확인할 수 있죠"라고 확인했다.

화면 복잡도가 다소 증가했지만, 전반적인 디자인 일관성을 유지했다. 카드 뒤집기 및 마우스 오버 애니메이션 등 요청된 인터랙션도 성공적으로 구현됐다.

AI의 디자인 능력은 예상보다 우수했지만, "AI스러운 디자인"이라는 기본값의 범람을 경계해야 한다. 에릭은 "실행은 AI에게 맡기지만 판단이나 취향 같은 거는 이제 사람이 관여해야 된다"고 강조했다.

결국 차이를 만드는 것은 레퍼런스를 활용한 반복 학습(Iteration)과 인간의 미적 취향이 디자인에 얼마나 반영되는지에 달렸다. 이는 AI 도구의 한계를 보완하고 독창성을 확보하는 중요한 요소다.

에릭은 모델별 디자인 능력을 비교하고 평가할 수 있는 자체 앱 서비스를 개발 중이다. 에릭은 "모델별 디자인 능력을 비교해 보고 싶고 또 평가해 보고 싶은 분들이라면 어떤 모델이 더 디자인을 잘하는지 알고 싶은 분들이라면 이 앱에 관심이 있으실 것 같습니다"고 밝혔다.

이 앱은 각 AI 모델이 특정 카테고리에서 어떤 강점을 가지는지, 그리고 작업에 소요되는 비용과 시간을 비교하는 데이터를 제공할 예정이다. 현재 런칭 전 얼리버드 신청을 받고 있다.