[운동 기록 웹페이지 만들기] 기획 (2023.03.01)

프로그래밍 공부를 시작하고 나서 만드는 나의 첫 웹페이지. 사실 파이썬 알고리즘 강의를 듣다가 어렵기도 하고 흥미도 줄어들고 그래서 CSS와 HTML 공부를 같이 시작하며 나만의 웹페이지를 만들어보려 한다. 블로그, 게시판 등 많은 것들이 있지만 이전부터 내가 만약 프로그래밍을 할 수 있게 된다면 만들고 싶었던 것 중 하나가 바로 운동 기록 웹페이지였다. 

 

기존에 어플로 만들어져 있는 운동 기록 어플은 기능이 너무 많아서 오히려 기록하는 데 비효율적이랄까. 그래서 나는 항상 어플을 쓰다가 포기하고 결국에는 스프레드시트를 사용했는데, 스프레드 시트도 나를 완벽하게 만족시켜 주진 않는다. 기록용으로는 좋은데 최대 중량이나 횟수, 운동을 한 날과 안 한 날 등을 한눈에 확인하기 어렵다는 것과 운동 종목을 일일이 입력해야 해서 매번 이름이 달라져 검색으로는 엑셀 기능으로는 max 값을 설정하기 어렵다는 것. 이 두가지다. 따라서 이 두 가지 기능을 가진 나만의 운동 기록 웹페이지를 만들어 보려 한다. 

 

웹페이지를 만들기 위해 가장 먼저 해야 할 일은 바로 기획. 어떤 페이지를 구성하고 어떤 기능을 추가할 것인지를 생각해야 한다. 화면을 구성하고 어떤 기능들이 있는지 보기 쉽게 표현한 자료를 스토리보드라고 하는데 스토리 보드를 작성하는 데 여러 가지 도구가 있지만 나는 이전에 사용해 보았던 카카오오븐을 이용하여 스토리 보드를 구성해 보았다. 이전 회사에 근무하면서 프로토파이, 카카오오븐, AXURE RP를 사용해 봤었는데 카카오 오븐이 기능은 적어도 굉장히 쓰기 간편했던 기억이 있다. 내가 만드려는 웹페이지가 복잡한 기능을 하는 페이지가 아니므로 카카오오븐을 사용하였다. (카카오오븐은 무료 서비스로 이용할 수 있다) 이렇게 프로토타입 툴을 이용하면 간단한 입력이나 링크 이동, 버튼 클릭을 구현할 수 있다. 

 

OvenApp.io

 

기획 1단계 : 종이에 대략적으로 페이지를 구성하고 주요 기능 작성해 보기

어떤 웹페이지를 만들지 결정한 후 내가 가장 먼저 한 일은 종이에 어떤 웹페이지를 만들 것인가에 대해 간략하게 정리하는 것이다. 대략적으로 어떤 페이지가 필요한지, 어떤 기능이 들어가야 하는지 생각나는 대로 아래와 같이 공책에 정리를 해보았다. 

 

주요 기능
1. 날짜별로 운동 종목, 운동 부위, 무게, 횟수, 메모 기록
→ 기록표에 보여지는 세트수는 설정 가능하게(3~10까지)
→ 운동종목은 리스트로 선택할 수 있고, 작성도 가능하며 자동 채움이 가능하게
2. 운동 한 날과 안 한 날 보여주기 (캘린더)
→ 한 달에 몇 번 운동했는지, 일 년에 몇 번 운동했는지 출력
3. 운동 종목별 최대 중량 기록 및 보여주기
→ 1년/6개월/3개월/1개월 단위로 확인 가능하게

주요 페이지
1. 로그인
2. diary
3. calendar
4. 회원가입

 

기획 2단계 : 나의 웹페이지가 동작하는 걸 상상하면서 필요한 페이지 추가 및 상세 기능 정의

1단계에서는 대략적으로 생각나는 대로 작성해 보았다면 2단계에서는 실제로 웹페이지가 만들어졌을 때 어떠한 순서로 돌아갈지 생각하면서 필요한 화면과 기능을 생각해 공책에 정리해 보았다. 

 

 

기획 3단계 : 기능, 화면, 배치에 대하여 스토리보드 작성

2단계까지 진행한 기획에서 추가이나 변경할 부분을 메모해두었다가 카카오오븐으로 스토리보드를 작성하면서 화면에 어떤 식으로 보여줄지, 기능은 어떻게 들어갈지 상세하게 정의한다. 

 

https://ovenapp.io/view/mjtONspCOIvLmGkwlv0nMkqoxR8muc4b/PpQJc

▲▲▲ 스토리 보드 링크

 

스토리보드까지 작성을 끝냈으니 이제 만들어야 할 차례이다.