구글캘린더와 연동되는 감성일기장 앱 만들기 1탄. Stitch로 디자인하기

소개

안녕하세요. 정옥선입니다.
현재 챗GPT와 다양한 AI를 활용한 업무,비즈니스,콘텐츠 강의를 하고 있습니다.
에이전트, 자동화에 관심이 있어 이번 기회에 배우려고 스터디를 참여하게 되었어요.

제가 만들고 싶은 앱은 구글캘린더와 연동하여 일정도 확인하면서 소소한 생각을 작성할 수 있는 다이어리 앱을 만들고 싶었습니다. 구글캘린더가 아주 유용하고 좋지만, 날짜별로 기록을 할 수 있는 형태가 아니라서 그때그때 떠오르는 생각을 작성하기엔 부족한 부분이 많아요.
글작성을 하기엔 감성적이지도 않구요.

하지만 저같은 첫 입문자는 수업을 들으면서 허들이 너무 많았습니다. 설치해야하는게 왜이리 많은지요! ㅎㅎ
스터디장님께서 친절하게 자세히 알려주셔서 따라가다가도 놓치거나, 설치를 했다고 생각했는데 작동이 안되어 아직 숙지를 다 하지 못했습니다.

그래서 그 중 텍스트만 간단하게 입력해도 사람들의 좋아할 만한 감성으로 즉각 디자인해주는Google Stitch 를 이용하여 디자인한 사례를 공유합니다.

진행 방법

  1. 아래 Stitch 싸이트를 들어가서 구글계정으로 로그인 해 줍니다.

https://stitch.withgoogle.com/

  1. 스티치 사용법은 아주 단순하고 쉽습니다.

    처음 보이는 홈화면에서 내가 디자인을 사용하고자 하는 용도에 따라 '앱'과 '웹'을 선택합니다.
    구글의 최신 모델을 현재 무료로 사용할 수 있어요.

중국어 옵션이 포함된 중국어 앱의 스크린샷

  1. 저는 하루를 기록하는 일기장 앱을 만들고 싶었어요. 기록장이니 차곡차곡 모아서 나만의 책을 만들어보고도 싶어서 PDF 다운로드 기능도 디자인에 넣어보도록 했어요.

한국어로 된 메시지 스크린샷

그 후 제가 원하는 디자인이 나올 때까지 계속 수정을 요청했어요.

"좋아. 구글캘린더와 연동하려면 설정에서 구글로그인 후 연동할 수 있어야하고, 설정창에 내 프로필 사진과 이름, 나를 표현하는 내용을 넣을 수 있으면 좋겠어"

"좀 더 따뜻한 느낌이 나도록 수정하고, 버튼도 좀 더 예뻤으면 좋어"

(필요시 수정이 필요한 위치를 캡처해서 넣었어요)

한국어 텍스트가 있는 검은 화면

"구글캘린더에서 가져온 일정을 연동하거나 끌수 있는 버튼도 만들어줘"

"달력은 2026년 1월로 해줘. 1월1일은 목요일이고, 31일은 토요일이야."

"일정은 빼고, 최근 작성한 3개의 리스트(한줄씩)가 보이고 클릭하면 들어갈수 있어."

  1. 디자인 완성

ui ui ui ui ui ui ui ui ui

결과와 배운 점

저는 디자이너가 아니기에 이런 디자인을 하려면 의뢰를 해야하겠죠?!
하지만, 이렇게 텍스트로 간단하게 만들수 있어서 뿌듯합니다.
제가 생각한것보다 더 예쁘게 나왔어요.

하지만, 앱이기에 사용자가 사용자권한으로 프로필수정이라던지 삭제기능이라던지 이런 부분은 만들고 사용해보면서 차차 더 수정해봐야 할 것같습니다.

앞으로 이 디자인에 서버와 구글캘린더를 연동하여 안드로이드앱으로 배포할수 있도록 하나씩 해 나가보겠습니다.

도움 받은 글

20기 안드로이드앱 스터디장 '로즈'님의 수업을 듣고 Stitch를 해볼수 있었습니다. 추가로 알려주신 수업내용도 숙지해서 완성이 될때까지 해보겠습니다.

1
1개의 답글

뉴스레터 무료 구독

👉 이 게시글도 읽어보세요