교육 앱에 디자인을 입히기 위한 삽질의 결과-스티치 사용하기

소개

지난번에 Antigravity로 구글 교육자 인증 시험을 대비한 교육 앱을 만들었습니다.
만들고 나니 디자인이 계속 맘에 안 드는 겁니다.

1차 디자인 : 안티그라비티 기본 디자인

2차 디자인 : 피그마 사이트에서 디자인 가이드를 찾아 링크를 주고 수정하게 함

이어서 다른 디자인 수정 방법이 있는지 찾아보게 되었습니다.

그래서 구글에서 새로 나온 스티치 서비스를 써보기로 했습니다.

스티치 처음 열고 프로젝트를 만든 다음, 디자인을 시작해달라고 프롬프트를 입력했습니다.

https://gce-quiz-app.vercel.app/ 구글 공인 트레이너 자격 시험을 준비하는 사람을 대상으로 하는 교육 앱이야. 이 앱을 더 효율적으로 발전시키고, 디자인을 밝고 건강한 느낌의 디자인으로 바꾸고 싶어.

스티치가 가장 먼저 PRD부터 만들기 시작했습니다.

계속해서 앱의 정체성을 입력하고, 한글로 디자인하라고 한 다음 서체를 지정해 주었습니다.

안티그라비티에 적용할 코드도 만들어줍니다.

안티그라비티에서 앱을 개발했는데 디자인 가이드를 만들어 주면 코드에 적용할 수 있지 않아?

좋은 점은 그간의 대화는 모두 '에이전트 로그'에 쌓인다는 점이라, 제가 해온 삽질을 확인할 수 있다는 사실입니다.

디자인 시안이 쌓이고 안티그라비티에서 적용할 때마다 애초의 사이트에 설정되었던 정보 구조에서 벗어나기 시작했습니다. 스티치가 시키지 않은 일을 하더군요.

디자인을 수정하면 할 수록 이상해지기 시작했습니다.
아래는 스티치가 만든 앱 디자인을 적용한 결과입니다.

디자인이 마음에 들지 않는데다 앱의 구조까지 바꿔버려서 깃에는 올리지 않고 계속 로컬에서 수정하고 있습니다.
아래는 깃에 올린 앱의 디자인입니다. 피그마 디자인 가이드로 수정한 디자인을 유지하고 있습니다.

그래서 아직 삽질 중입니다.
스티치를 제가 잘 모르기도 하고, 쓰면서 배우는 중이라 어떤 기능이 더 있는지 탐구 중입니다.
어쨌든 꾸준하게 수정해보고 좋은 방법을 찾아 볼 계획입니다.

이번 디자인 작업에서 깨달은 점이 있습니다.

AI에게 아무 생각 없이 일을 주면 안된다는 거죠.
미리 설계를 하고 원하는 것이 무엇인지 분명하게 정한 다음,
할 일과 하지 말아야 할 일을 구분해서 지시해야 한다는 점이죠.