#4. 화면계획서 만들기
전업엄마의 어플개발기
"피그마에 화면계획서를 그려주시겠어요?"
피그마? 화면계획서? 뭐지, 이건 또? 머릿속에 물음표가 떠다니기 시작했다. 이름만 들어도 뭔가 프로페셔널한 느낌인데, 나는 이쪽에 완전 초짜 아닌가. 당황한 마음을 추스르며 업체에 물어보기 전에 인터넷에 검색부터 하기 시작했다. 내가 너무 모르는 티를 보이면 업체에 얕보이진 않을까 염려해서였다.
피그마(Figma)와 화면계획서
먼저 '피그마'부터 검색했다. 피그마란 팀원들과 실시간으로 작업 내용을 공유할 수 있는 디자인 도구라고 한다. 어플의 모든 화면을 캡처해 놓은 듯한 이미지들이 검색되었다. 이 화면을 다 같이 공유해서 보고 코멘트도 바로바로 달면 편하긴 하겠다. 이런 거 보면 기술은 진짜 많이 발전한 것 같다.
그다음은 '화면계획서'다. 이건 어플이나 웹사이트를 개발하기 전에 화면의 구조와 흐름을 정리해 놓은 설계도 같은 거라고 한다. 각 화면이 어떻게 연결되는지, 모든 버튼이 어디에 있고 누르면 어떤 기능이 작동하는지를 정리한 문서라는데, 정리된 이미지를 보니 이게 중요한 이유를 알 것 같았다. 내가 새로운 어플을 처음 사용할 때 어플 화면에서 어디를 눌러야 할지 몰라서 헤맸던 기억이 스쳐갔다.
이렇게 정보를 조금씩 찾아보니 머릿속에 그림이 그려지기 시작했다. 화면계획서를 작성하려면 먼저 어플의 기능과 화면 구성을 구상해야 한다. 내가 만든 육아 AI 어플에서 어떤 화면이 필요한지 떠올려봤다.
화면계획서, 앱 설계의 청사진
육아 AI 어플에서 가장 중요한 화면이 뭘까? 앱에서 중요한 화면들을 떠올리며 리스트를 작성해 봤다.
1. 홈 화면: 사용자들이 가장 먼저 마주할 메인 화면
2. 달력 화면: 출산·육아 혜택을 임신/출산 주차별로 보여주는 화면
3. 다이어리 화면: 사용자들이 육아 기록을 남기는 공간
4. 설정 화면: 계정 정보나 알림 설정을 할 수 있는 화면
크게 네 가지 주요 화면들을 구상했으니 이제 작은 화면들을 구상할 차례다. 피그마에 하나하나 그려 넣기 전에 인터넷에 '피그마 사용법'을 검색했다. 아.. 그런데 어렵다. 딱 봐도 어려워 보였다. 대학생 때 이후로 포토샵도 만져본 적 없는 내가 이제 와서 디자인 도구를 다룬다니. 처음 파이썬 언어를 접할 때처럼 막막한 벽이 느껴졌다. 이거 또 배우다가 한 세월 가겠는데?
아날로그의 힘, A4 용지
어차피 내가 화면을 구상한 내용만 전달하면 되는 거 아닌가? 차라리 그림 그리는 게 더 빠르겠다! 결국 책꽂이에서 한동안 묵혀있던 A4 용지를 꺼내고 펜 한 자루를 손에 쥐었다. 머릿속에 어플 화면 구성이 어렴풋이 그려졌던 게 떠올라, 일단 뭐라도 그리자 하는 마음으로 대충 선을 그어보기 시작했다. 처음에는 조금 머뭇거렸지만, 펜을 움직이는 순간 뭔가 편안한 기분이 들었다. 디지털은 모르겠지만, 아날로그 방식은 내 손에 익숙하니까.
오랜만에 펜을 잡고 네모네모 그림을 그리고 있으니 느낌이 또 새로웠다. 생각보다 재밌는데? 머릿속에 있는 내용을 구체화시켜서 밖으로 꺼내자니 머리가 아프긴 했지만 이런 게 또 창작의 고통인가 싶어 괜히 혼자 뿌듯했다. 아기를 재우고 혼자 방에 들어가 계획서를 그리고, 아기가 울면 다시 또 밖으로 나가 아기를 달래고 재우고 놀아주고. 몰두할 수 있는 시간이 적고 그리는 자체가 어렵기도 해서 화면계획서가 생각보다 금방 완성되지는 않았다. 그래도 틈틈이 머릿속으로 구상하고 그걸 또 직접 그려보니 확실히 방향성이 잡히는 것 같았다.
'완벽'보다 '시작'이 중요하다
새로 알게 된 피그마는 너무 어렵게 느껴졌지만, 이렇게 손으로 그리니 오히려 내가 원하는 게 무엇인지 더 명확하게 정리됐다. 물론 이걸 다시 디지털로 옮겨야 할 날이 오겠지만, 지금은 이 정도로도 충분하다.
"피그마도 결국 이런 걸 그리는 거잖아?"
A4 용지 위의 낙서 같은 화면계획서를 보며 또 하나를 이뤘다는 생각에 설렘이 일었다. 실제 어플로 구현될 설계도를 보고 있으니 더 가슴이 벅차올랐다. 이게 진짜 어플로 나타난다니. 믿기지 않기도 하고 걱정도 되고. 하지만 중요한 건 완벽한 도구가 아니라, 내가 시작했다는 것.
- 다음 이야기: 제5화. 톤 앤 무드 정하기
