들어가며
2년 전에 대학교 근처 아동센터에서 1년간 알바를 한 적이 있다. 초등학교 저학년 친구들이 많이 다녔는데, 친구들 공부를 봐주고 숙제를 다 하면 동화책을 읽어주는 게 주된 일이였다.
나는 종종 동화책을 읽어주면서 주인공 이름을 그 친구의 이름으로 바꿔서 읽어주곤 했는데 그 때마다 얼굴에 웃음이 가득했던 기억이 난다.
동화의 등장인물과 스토리를 원하는 대로 만들어서 읽어주면 얼마나 좋아할까?
이런 생각을 했지만 당시 내 상상력이 그렇게 좋지 않았다...😅
그래서 지금이라도 만들어보려고 한다. 직접 만드는 동화책, '자장자장'이다.
기획
러프 스케치
피그마를 사용하면 머릿속에 있는 생각을 빠르게 꺼낼 수 있다.
일단 러프하게 어떤 순서로 진행될지부터 메모로 적어본다.
레퍼런스 수집
그 다음 레퍼런스로 삼은 페이지들을 가져온다.
- 0단계: 메인 서재
- 1단계: 토픽 선택
'Game Dev Tycoon'이라는 게임의 토픽 선택 화면이다. - 2단계: 등장인물 추가
- 3단계: 교훈 선택
- 4단계: 분위기/결말 선택
확실히 레퍼런스를 잘 가져오면 추상적이던 생각이 잡히며 서비스의 특징도 뚜렷해지는 느낌이다.
내가 가져온 레퍼런스는 모두 '가로 스크롤'이다. 이렇게 큰 UX를 하나 결정하면 서비스를 구체화하면서 자잘한 기능들의 특징을 통일시킬 때 편하다. 결과적으로 사용자에게 통일되고 쉬운 경험을 제공할 수 있다.
동화책 뷰어 설계
다음은 완성된 동화책이 어떤 식으로 보여질지 러프하게 잡아 보았다.
- 표지 삽화: Gemini API로 생성 (글자 깨짐 방지를 위해 그림만 생성, 제목은 텍스트로 별도 삽입)
- 페이지 넘김: 좌-우 스와이프
프로토타입
기획본을 기반으로 Google AI Studio를 사용해 프로토타입을 뽑았다.
노코드 툴이 MVP 만들 때는 최고인 것 같다.
메인 서재
누가 봐도 AI Studio가 만든 듯한 디자인으로 잘 나왔다. (이건 나중에 다듬을 예정)
1단계: 토픽 선택
새 동화 만들기를 누르면 토픽을 고를 수 있다. 최대 2개까지 선택 가능.
생뚱맞은 주제를 조합하는 것도 재미있다.
2단계: 등장인물 추가
이름, 나이, 성별을 자유롭게 수정할 수 있다.
이름을 '엄마', '아빠'로 하면 이야기 생성 시 가족 관계로 인식해서 만들어준다.
3단계: 교훈 선택
동화책은 꼭 독자에게 주고 싶은 교훈이 명확하고, 그 교훈이 이야기의 중심에 있어야 한다.
'도전하기'를 선택했다.
4단계: 분위기/결말 선택
마지막으로 이야기의 분위기와 결말을 선택하고, 동화 만들기를 시작한다.
완성된 동화책
동화책이 만들어졌다!
상단의 '동화 듣기'를 누르면 TTS가 부드러운 목소리로 동화를 읽어준다.
다음 글에서는
프로토타입을 개발 환경으로 가져와서 배포 가능하게 다듬어볼 예정이다.
- 코드 정리 및 리팩토링
- 배포 환경 세팅
- 디자인 개선
읽어주셔서 감사합니다~!
