프로토타입을 '진짜 서비스'처럼 보이게 만드는 건 결국 디테일이다.
들어가며
지난 글에서는 자장자장을 기획하고, 노코드 툴을 사용해 빠르게 프로토타입을 만들어보았다.
오늘은 이 프로토타입을 개발 환경에 가져와서 본격적으로 배포가 가능하게 다듬고, 기능을 추가할 것이다. 더해서 Google AI Studio스러운 디자인도 손보겠다.
완성된 서비스는 여기서 사용해볼 수 있다.
👉 https://jajang-jajang.vercel.app/
결과물
메인 화면
서재에서 지금까지 만든 동화책을 확인하고, 새로운 동화를 만들 수 있다.
1단계: 토픽 선택
마음에 드는 토픽을 최대 2개까지 선택할 수 있다. 우주+요리처럼 생뚱맞은 조합도 재미있다.
2단계: 등장인물 추가
등장인물을 추가하고, 이름과 나이, 성별을 자유롭게 바꿀 수 있다.
3단계: 교훈 선택
동화가 전달할 교훈을 선택한다. 이야기의 중심이 될 가치다.
로딩 화면
동화가 만들어지는 동안 기다리는 시간.
완성된 동화책
완성된 동화책을 넘겨가며 읽을 수 있다. 부모님이 아이에게 직접 읽어주면 좋을 것 같다. 마음에 드는 동화책은 '저장하기' 버튼을 눌러 서재에 보관할 수 있다.
타겟 사용자 다시 정의하기
디자인을 손보기 전에, 먼저 이 서비스를 누가 쓸지 다시 생각해봤다.
자장자장의 사용자는 미취학~초등 저학년 자녀를 둔 부모다. 하지만 실제 화면을 조작하는 건 부모일 수도 있고, 아이와 함께 볼 수도 있다. 이 두 가지 상황을 모두 고려해야 했다.
- 부모 혼자 쓸 때: 빠르게 설정하고 동화를 만들고 싶다. 복잡하면 안 된다.
- 아이와 함께 볼 때: 아이가 화면을 보며 "이거!"하고 고를 수 있어야 한다. 시각적으로 재미있어야 한다.
결론적으로, 조작은 단순하게 + 화면은 아이가 봐도 즐거운 톤으로 가닥을 잡았다.
디자인 결정: "왜 이렇게 만들었나"
AI Studio 느낌을 벗어나야 했던 이유
Google AI Studio로 뽑은 초기 프로토타입은 주황색 계열 톤에 둥근 카드가 나열된 전형적인 "AI가 만든" 디자인이었다.
문제는 이 디자인이 자장자장의 타겟과 맞지 않았다는 점이다. 30대 부모가 아이와 함께 보는 서비스인데, 테크 스타트업 대시보드 같은 느낌이면 정서적 괴리가 생긴다. "따뜻한 잠자리 동화" 경험과 거리가 멀었다.
배경: 책상 vs 하늘
처음에 원한 느낌은 나무 책상에 앉아서 동화책을 읽는 따뜻한 분위기였다.
하지만 써보니 뭔가 정적이고 답답했다. 동화책을 읽는 시간은 상상력이 펼쳐지는 시간인데, 화면이 막혀 있으면 그 느낌이 안 났다.
그래서 탁 트인 하늘 + 움직이는 구름으로 방향을 바꿨다. 아이들이 좋아하는 "바깥 세상" 느낌이기도 하고, 구름이 천천히 움직이면 화면이 살아있다는 인상을 준다.
구름과 잔디 이미지는 나노바나나를 이용해 만들었다.
버튼: "누르고 싶은" 느낌
버튼은 피그마로 직접 만들었다.
유아용 앱들을 조사해보니 공통점이 있었다. 버튼이 입체적이고, 색이 선명하고, 크다. 이유가 있다.
- 입체감: 아이들은 "이게 누르는 거구나"를 시각적으로 명확하게 인지해야 한다. 플랫 디자인은 어른들에겐 세련되지만, 아이들에겐 어디를 눌러야 할지 헷갈릴 수 있다.
- 선명한 색: 주의를 끌어야 한다. 파스텔톤보다 채도 있는 노란색이 "여기야!"라고 말해준다.
- 큰 터치 영역: 아이들 손가락은 정교하지 않다. 작은 버튼은 실수로 다른 데를 누르게 만든다.
자장자장의 버튼을 노란색 톤 + 살짝 입체감 + 넉넉한 크기로 만든 건 이런 이유다.
아이콘: 스타일 통일의 중요성
토픽과 교훈 카드의 아이콘은 Gemini로 생성했다.
프로토타입의 이모지는 3D 렌더링 스타일이라 자장자장이 지향하는 "따뜻한 동화책" 톤과 맞지 않았다. 너무 딱딱하고 디지털한 느낌이었다.
원하는 건 손그림 동화책 일러스트 느낌이었다. 아이가 봤을 때 "그림책에서 봤던 것 같은" 친숙함. 그래서 Gemini에 같은 스타일 프롬프트로 토픽과 교훈 아이콘을 모두 생성해서 통일감을 맞췄다.
작은 차이지만, 이런 디테일이 쌓이니까 확실히 완성도가 달라 보였다.
UX 디테일: '로딩'을 '기대감'으로
AI 서비스는 필연적으로 생성 시간이 소요된다. 이 지루한 시간을 어떻게 연출하느냐가 사용자 경험을 좌우한다.
어린이들을 위한 동화책 앱 'Fairy Tales'에서는 로딩 화면에 용 캐릭터가 날개짓을 한다.
'Fairy Tales'에서 지루한 로딩 바를 사용했다면 어땠을까? 로딩처럼 사소해 보이는 요소도 사용자 입장에서 다시 보면 경험을 바꿀 수 있는 포인트가 된다.
자장자장은 현재 기본 로딩 스피너를 사용하고 있다. 다음 버전에서는 토끼가 책장을 넘기는 애니메이션으로 바꿔볼 생각이다.
기술적 디테일: Dominant Color 추출
서재에 저장된 동화책 카드가 단조로워 보이는 게 신경 쓰였다. 모든 카드가 똑같은 배경색이면 "내가 만든 동화책들"이라는 애착이 덜 생긴다.
그래서 표지 이미지에서 대표 색상을 추출해 카드 배경에 적용했다. 우주 이야기는 남색, 숲속 이야기는 초록색 계열로 자연스럽게 구분된다.
트러블슈팅
환경 변수 이슈
로컬에서는 잘 돌아가던 서비스가 Vercel 배포 후 API 호출이 실패했다. 원인은 환경 변수 설정. Vercel 대시보드에서 GEMINI_API_KEY를 등록하고, 재배포하니 해결됐다.
회고
잘한 점
- 타겟 기반 의사결정: "부모+아이"라는 사용자 정의를 기준으로 디자인 방향을 잡았다.
- AI Studio 디자인 탈피: 배경 일러스트와 통일된 아이콘 스타일로 "템플릿 갖다 쓴" 느낌을 없앴다.
- Dominant Color: 작은 디테일이지만 서재 화면의 완성도를 확 올려줬다.
아쉬운 점
- TTS 기능 미구현: 원래 계획했던 "직접 읽어주기 vs TTS" 선택 기능은 다음 버전으로 미뤘다.
- 로딩 화면: 기본 스피너를 그대로 쓴 게 아쉽다. 서비스 톤에 맞는 애니메이션이 필요하다.
다음에 추가하고 싶은 것
- 페이지별 삽화 생성
- 중간중간 아이와 상호작용할 수 있는 질문 삽입
- 동화 길이 선택 옵션 (단편 / 장편)
마무리
2년 전 아동센터에서 아이들을 주인공으로 바꿔 읽어주며 느꼈던 그 순간을 떠올리며 만들었다.
자장자장이 그런 순간을 더 많이 만들어줄 수 있으면 좋겠다.
직접 써보고 피드백 주시면 감사하겠습니다!😊
