[설계] 프로젝트 기본 설계 01

새로운 프로젝트를 시작할 때는 설계 단계가 선행되어야한다.
설계가 얼마나 꼼꼼하게 잘 되었냐에 따라서 차질없이 개발을 진행할 수 있으며, 결과의 완성도 또한 올라간다.
이번 글에서는 현재 진행중인 프로젝트의 설계를 어떻게 하고 있는지에 대해 작성해볼 것이다.

현재 프로젝트는 다음과 같은 순서로 설계를 시작하였다.

순서

1. 동작을 정리한다.
2. flow chart를 만든다.
3. valifation을 한다.
4. UI를 설계한다.

동작을 정리한다.

본 단계에서는 UseCase의 구성 요소를 정리하여 사용자가 어떤 action을 취할 수 있는지 파악한다.

팀원들이 모여 서비스 내에서 할 수 있는 action에 대해서 정리한 것.
정해진 시간을 두고 모두 생각나는대로 자유롭게 작성하는 것을 환경에서 진행함.

---

flow chart를 만든다.

• 첫 시작은 검정 원(start)부터 시작해서 화면의 종류와 진행 방향을 동시에 설계한다.
• 어느 화면에서 어떤 화면으로 이동할 수 있는지를 정리하고
• 그 이동 방식이 버튼 클릭을 통한 버튼인지, 메뉴 또는 바텀 네비게이션을 통한 이동인지 나눈다.
  • 버튼을 통한 이동이면 B가 써져있는 마름모를 중간에 두고 그 옆에 action을 둠으로써 버튼을 통해 화면을 이동하는 것을 나타낸다.
    • 버튼을 기준으로 설명이 왼쪽에 들어갈지, 오른쪽에 들어갈지는 action의 발생 시점에 따른다.
    • 예를 들어, SignUp → Home 사이에 있는 버튼은, 확인 버튼을 누르기 전에 validation이 선행되어야 한다. 즉, validation이 되지 않으면 버튼을 disabled하기 때문에 마름모 이전에 설명이 들어간다.
  • 화면에 있는 네비게이션 메뉴 바나, 앱의 바텀 네비게이터는 버튼이 아니다. 따라서 마름모를 작성하지 않는다.
• 모달은 사다리꼴로 표현하고, 모달 내에서 이루어지는 입력 등의 동작은 따로 작성하지 않음.

---

validation을 한다(BE)

해당 페이지에서 어떤 정보를 입력받을지, 어떤 제한사항이 있는지 적어두는 것임.

• 이메일은 320자까지 입력할 수 있는 것이 베이스임
• 비밀번호는 제한사항(대소문자, 특수문자, 숫자 필수)가 있음
• 한국 이름은 1자~32자까지 입력할 수 있다.
• 전화번호는 String으로 11자까지 입력

---

UI설계

위 내용들을 토대로 Figma를 통해 UI를 설계할 계획이다.
UI/UX설계 및 이후 작업은 다음 포스트에서 계속 !