[개인 프로젝트] 가계부 프로젝트 step2 : UI

화면까지 구현하고자 했을 때 가장 먼저 해야할 것은 어떤 UI로 만들지 정하는 것이었다. UI 디자이너는 아니지만 피그마로 지금 내가 만들 수 있는 화면에 대해 구성을 해보았다. 계속 변경할 가능성이 있어서 실제 결과는 약간 다를 수도 있을 것 같다.

 

각 화면에 대한 기능이나 자세한 설명은 사진 하단 내용을 참고하면 될 것 같다.

 

 

1. 메인 화면

로그인 하기 전과 후에 화면이 다르게 구성했다.

 

- 로그인 전

메인 화면이 휑해서 추후에 내용을 채울 예정이다. 지금 생각하는 것으로는 프로젝트에 대한 간략한 소개와 가계부 프로젝트 이므로 경제 관련 기사를 크롤링해서 가져오는 것이 있다(어찌됐든 개발적으로 이것저것 경험하는 것이 좋을 것 같아서 크롤링까지 생각해봤다).

 

 

- 로그인 후

로그인 성공 후에는 가계부 달력과 지출관련 통계를 볼 수 있게 내비게이션 바 항목을 변경했다.

 

2. 회원가입

회원가입은 사용자 이름(닉네임), 이메일, 비밀번호를 입력한다. 이메일은 유일하며, 이를 인증하기 위해 작성한 이메일로 인증번호 전송 후 확인하는 방법으로 구현했다.

 

이메일을 입력한 후 '이메일 인증' 버튼을 누르면 작성한 이메일로 6자리 숫자로 구성된 인증번호가 전송되며, 인증번호를 입력할 수 있는 칸이 새로 생긴다. 

 

이메일로 전송받은 인증번호 입력 후 인증 완료 버튼을 누르면 alert가 뜨며 인증 성공을 알려준다. 이후 비밀번호를 입력한 후 '회원가입' 버튼을 누르면 회원가입에 성공한다.

 

3. 로그인

 

4. 가계부 달력

로그인 후 우측 상단에 있는 '가계부 달력'을 클릭하면 이번 달의 가계부 달력으로 이동한다. 

다른 달력을 보고 싶으면 왼쪽 상단에 있는 화살표로 이동하면 된다. 이동할 때마다 해당 월의 날짜 개수가 다르므로 화면은 동적으로 변한다.

오른쪽 상단에 '예산 알림 받기'를 누르면 화면에 있는 달의 예산 상태(여유, 초과) 알림을 알려준다.

달력 칸을 클릭하면 해당 날짜의 지출내역을 모달로 보여준다.

 

 

- 예산 알림 확인

'예산 알림 받기'를 클릭하면 오른쪽 상단에 알림이 온다.

예산이 남았다면 '남은 예산은 $$$$ 입니다.' 라고 온다.

예산이 초과되었다면 '예산이 초과되었습니다.' 라고 온다.

지출내역이 아예 존재하지 않는다면 '지출내역이 존재하지 않습니다.'라고 온다.

 

- 특정 날짜 클릭 시  관련 지출내역 조회

특정 날짜(예시로 3월 1일) 칸을 클릭하면 아래와 같이 모달이 뜬다.

모달에는 날짜에 해당하는 지출내역 정보가 금액 | 거래처 | 결제 수단 | 카테고리명 | 메모 형태의 리스트로 확인할 수 있다.

각 지출은 수정할 수 있으며, 우측에 있는 '수정' 버튼을 누르면 수정 페이지로 이동한다.

해당 날짜에 새로운 지출을 입력하고 싶으면 아래의 '+ 지출 입력하기' 버튼을 클릭하면 된다.

 

5. 지출 입력

지출 입력 항목은 금액, 카테고리, 거래처, 결제 수단, 메모, 시간이 있다.

 

금액, 거래처, 결제수단, 메모는 사용자가 직접 텍스트로 입력하면 된다.

카테고리는 사용자가 기존에 등록했던 카테고리 중에 선택해야 하므로, '카테고리를 선택하세요'라고 누르면 카테고리 리스트를 확인할 수 있다. 

시간은 'YYYY-mm-DD' 형태로 입력이 가능하며, 박스를 클릭하면 드롭박스로 날짜(ex. 2024-03-01)를 선택할 수 있다.

 

6. 카테고리

'카테고리를 선택하세요' 버튼을 누를 시 카테고리 리스트를 조회할 수 있는 모달이 뜬다.

카테고리 리스트는 사용자별로 동적으로 가져온다.

전체 카테고리 중 하나만 선택 가능하다(리스트가 라디오 버튼으로 구성되었기 때문).

각 카테고리별로 이름이 수정 가능하고, 카테고리 이름은 중복이 가능하다.

새로운 카테고리 추가할 때에는 '카테고리 추가' 버튼을 누르면 된다.

기존 카테고리를 수정/삭제 할 때에는 특정 카테고리 우측에 있는 '수정' 버튼을 누르면 수정/삭제하는 모달로 이동한다.

 

- 카테고리 추가

수정할 카테고리의 이름을 입력한 뒤 '완료' 버튼을 누르면 해당 카테고리가 저장된다.

그 동시에 이전의 카테고리 조회 모달로 이동한다.

 

- 카테고리 수정

수정할 카테고리 이름을 입력한 뒤 '완료' 버튼을 누르면 카테고리 수정이 반영된다.

'삭제' 버튼을 누르면 해당 카테고리가 삭제된다.