📰 DB설계
가장 기본적인 user 사용자가 필요할 것이다. 사용자의 PK로 둘 ID, 닉네임, 패스워드, 가입된 크루 등이 저장
운동을 한 기록을 저장할 수 있어야한다 => 운동기록(거리,속도,시간,사용자id를 FK로 가져야할 것)
달린 경로에 대한 그림을 그려야한다 => 경로(시작일,총 거리, 경로, 사용자id를 FK로 가져야할 것)
그림은 서버에 저장하고 불러올 수 있게한다 => 그림(그림url, 사용자id를 FK로 가져야할 것)
사용자별 크루에 대한 정보를 가져야한다 => 크루(크루명,대표,인원,생성일자)
위와 같이 팀원들과 함께 틀을 잡았고, 상세 설계는 팀원들이 각자 1,2개씩 직접 DB를 만들어보았다.
DB는 ERDCloud를 사용했는데, 처음으로 이런 ERD를 제작할 수 있는 사이트를 사용해보아 신기했다.
내가 만든 부분은 사용자, 그림경로, 그림이었다.
다른 팀원들이 상의할 부분이 있어 내가 3개를 맡아 만들었고 내용이 그렇게 많지는 않아서 시간이 오래 걸리진 않았다.
#user
당연히도 식별할 수 있는 유일한 식별자가 있어야 하고 그것을 id로 정했다. 유저에 필요한 pw, 닉네임, 프로필 사진을 저장해둔 url, 소속 크루를 만들었다. 각각 타입은 넉넉하게 두었다.
#그림 저장
user에 속해져있고 그림이 아직 저장이 안되있을 수도 있고, 이미 그림 여럿이 존재할 수도 있기에 그에 따른 관계를 설정해주었다.
#그림 경로
위와 비슷하게 user에 속해있고, 그림경로가 아직 없을 수도 있고, 여럿 있을 수도 있다. 그 외 필요한 정보들을 기입했다.
만들면서도 약간 뭔가 자신이 없었다. 백엔드 쪽을 깊게 다룬 적이 없어서 최소한으로 간략하게 정보를 표현하고 적절한 정규화가 수행될 수 있도록 노력을 해보았다.
📰 UI설계
[ 나는 크루에 대한 UI를 설계 및 로고 제작을 하였다 ]
UI설계는 피그마를 사용했고, 참고할만한 어플들을 찾기 위해서 wwit이라는 사이트를 사용했는데 UI를 참고하기 정말 좋은 사이트인 것 같았다.
팀원들과 함께 여러 UI 참고 모델들을 보고 우리 어플에 방향성에 적합할 수 있는 참고 UI들을 몇 개 선정하고 우리 어플에 맞게 UI를 만들었다.
예전 프로젝트 때마다 엄청 느낀 것이 우리 수준에서 UI를 직접 만들고 UI 흐름을 설정하면 다 만들고 보면 무언가가 엉성하거나 문제가 있는 경험이 너무나도 많았다. 자연스럽지 못한 UI흐름이거나 굳이 필요없는 페이지를 만들거나 너무 많은 정보가 한 페이지에 들어가 있다던가 하는 경우 말이다. 아무튼 UI를 참고하여 우리의 주제에 맞게 변경하는 것이 좋을 듯하였다.
🔍 실제 UI 설계 이미지
크루에 대한 대략적 UI틀을 만들었다.
인기 크루, 크루에 대한 랭킹을 크루 메인 페이지에서 보여주고, 이를 클릭하여 해당 크루로 들어갈 수 있게 할 것이다. 또한 한 주 동안에 크루원들의 달리기 km를 합산하여 이 주의 크루 랭킹을 매길 예정이다.
본인이 원하는 크루명을 찾을 수 있게 하고 본인의 크루 여부에 따라 다른 UI를 보여줄 예정이다.
< ! 문제점 : 블로그에 정리하다보니 크루를 클릭해서 해당 크루로 들어갔을 때 UI도 만들어야할 것 같다..버튼으로 해서 해당 크루로 들어갈 수 없다면 번거롭게 해당 크루를 검색을 해야하니>
크루를 생성할 수 있는 페이지다. 크루를 생성하고 나면 해당 내용들을 공유하여 지인들에게 크루 가입을 권유하는 메시지를 보낼 수 있도록 할 예정이다.
< ! 문제점 : 크루생성 버튼이 없다..크루메인에서 크루 생성하기 버튼을 어딘가 만들어야겠다. 놓친 부분이 많네>
본인의 크루 정보를 확인할 수 있는 페이지이다. 크루 탈퇴를 할 수 있도록 버튼을 만들어두었다.
🤔 느낀점
UI설계를 집중해서 막 할 때에는 잘 몰랐는데 그렇게 글로 쓰면서 정리를 하다보니 내가 놓친 부분이 정말 많다는 것을 느꼈다. 또한 DB설계 같은 경우에도 이건 이렇게. 저건 저렇게. 딱 딱 내가 하는 것이 아니고 어..이게 맞겠지? 같은 조금 애매한 부분이 많았다. 설계 부분에 대한 지식을 더 많이 쌓을 필요가 있다.
