키즈 다이어리 키다는 갈수록 늘어나는 맞벌이 가정과 아이들의 사교육 수행 시간 확대로 인해 부모와 아이의 단절된 소통을 중점으로 해결하고자 하는 서비스입니다. 부모와 아이는 키다를 통해 정해진 주제에 따른 일기를 서로 공유하고 아이의 경우 당시의 감정을 선택할 수 있습니다. 또한 실제 서울특별시에서 진행 중인 문화행사 정보들을 조회하고 함께 가고 싶은 장소를 저장하고 공유해 손쉽게 함께 참여할 수 있는 활동에 접근하고 참여할 수 있게 돕습니다.
-
Typescript: 자바스크립트의 문법에 타입 지정을 할 수 있도록 만들어진 언어로, 자바스크립트의 자유도와 타입 언어의 안정성까지 갖춘 언어입니다. 해커톤이라는 짧은 시간동안 최대한 오류를 방지하여 완성도를 높히고, 타입스크립트를 통한 타입 추론의 도움을 받기 위해 사용했습니다.
-
NextJS: ReactJS를 더욱 간편하게 사용하기 위해 만들어진 프레임워크로, 추가적인 설정 없이도 기본적으로 ServerSideRendering이 가능한 것이 장점입니다. 또한, 외부 라이브러리의 도움 없이도 자동으로 파일 구조 기반 라우팅이 가능하여 직관적인 폴더 구조를 구축할 수 있습니다. 일기 페이지같은 경우 데이터의 변경이 잦지 않기 때문에 SSG/ISR을 추후에 적용하고자 NextJS를 도입하게 되었습니다.
-
Styled-Component: CSS 파일 없이 자바스크립트 안에서 CSS 작업을 하기 위한 라이브러리로, 서비스 스타일링의 대부분을 Styled-Component를 통해서 작업했습니다. Props 전달이 가능하기 때문에 상태에 따른 스타일링을 더욱 간편하게 처리할 수 있습니다.
-
Axios: 백엔드와 통신을 하기 위한 HTTP 클라이언트 라이브러리로, 자바스크립트 내장 라이브러리인 fetch 함수엔 없는 인터셉터와 더욱 간편한 에러 캐치를 위해 사용했습니다.
| 로그인 | 메인 |
|---|---|
 |
 |
| 먼저 로그인 페이지입니다. 키다의 대표 캐릭터의 시선이 인풋 박스의 좌측부터 우측까지 따라가는 애니메이션을 추가해 동적 상호작용으로 초등학교 저학년을 대상으로한 사용자 경험(User Experience) -이하 UX- 을 고려했습니다. |
다음으로 메인 페이지입니다. "부모님이 주신 선물 중 가장 기억에 남는 것은 무엇인가요?"와 같이 매일 일기를 작성할 질문을 제공하면 이에 대해 아이가 답변을 남길 수 있습니다. 또한 서비스 내에서의 활동에 따른 캐릭터 성장이라는 게이미피케이션 요소를 통해 초등학교 저학년을 대상으로한 UX을 고려함과 동시에 해당 성장은 부모의 참여 또한 유도되기 때문에 부모와 아이의 소통은 물론 이에 따른 일일 활성 사용자수(Daily Activated Users) -이하 DAU- 를 늘릴 수 있습니다. |
| 일기 목록 | 개별 일기 |
|---|---|
 |
 |
| 일기 목록 페이지의 경우 앞서 아이가 일기를 작성할 때 정해진 5가지의 감정 중 하나를 선택하면 그에 따른 이모지를 직관적으로 보여줘 부모 입장에서도 아이의 감정을 한 눈에 알아볼 수 있게 하였습니다. | 개별 일기 페이지의 경우 부모가 아이의 일기에 대한 답장을 남길 수 있게 하여 만약 답장을 남겼을 경우 "참 잘했어요" 같은 일종의 보상을 제공해 지속적인 참여에 대한 동기부여를 제공했습니다. |
| 활동 목록 | 활동 필터 |
|---|---|
 |
 |
| 활동 목록의 경우 서울시에서 제공하는 공공데이터 API를 활용해 공공기관 등에서 진행 중인 체험 활동 데이터를 목록화하여 보여줍니다. | 더욱이 활동 페이지에서 여러 조건을 기준으로 필터링을 가능하게 하여 사용자가 좀 더 쉽게 본인이 원하는 활동 정보를 찾을 수 있게 하였습니다. |
마이홈 페이지에는 함께해요 탭과 함께했어요 탭이 존재합니다.
| 함께해요 | 함께했어요 |
|---|---|
 |
 |
| 함께해요 탭의 경우 이전 활동 페이지에서 부모와 아이가 찜한 활동을 볼 수 있습니다. | 함께했어요 탭의 경우 활동 중 직접 참여한 활동에 대해 일기를 작성하고 이를 아카이빙할 수 있는 탭입니다. |