2022.08.10 ~ 2022.08.24 동안 진행한 Reptopia UI입니다. 몇 번을 갈아엎었는지 모르겠지만, 그 과정이 의미있었습니다.
아직 draft로 봐주시면 될 것 같습니다.
로그인 화면입니다. 문구는 UX를 고려하여 작성해봤습니다.
ux 키워드는 친근함과 의미심장입니다.
가입 화면입니다. 쿠키를 이용해 구면인 사용자를 알아봅니다.
메인화면입니다. 회색 상자는 사육장 canvas가 들어갈 예정입니다.
배경은.. 음... 공부중입니다..
이런 식으로 가로형, 세로형 사육장 배치가 가능합니다.
게시글 목록 화면입니다.
게시글 상세 화면입니다.
상점입니다.
분양소입니다.
유저 정보 화면입니다.
전반적으로 빈약한 곳(색, 폰트, 여백 통일성)이 많지만 큰 틀은 이렇게 갈 것 같습니다.
상단 툴바가 있는 타 사이트들과 비슷한 구조입니다. 여러 구조를 시도 해봤지만 사이트 구조에서는 새로움보다 익숙함이 좋은 경험을 줄 것이라 생각했습니다. 익숙함과 빠른 개발을 위해 angular material을 사용했습니다. 색은 심플하고 밤낮을 상징하는 white / #212121을 사용했으며, 각진 모서리로 심플한 디자인을 만들어봤습니다. -> 결과적으로 모던한 디자인이 되어서 수정 고민 중입니다.
계획에는 UI 구현 3일 전인데 아직 사육장 상세, 상점 물품 상세, 댓글 UI를 구현해야 합니다. 아마 계획보다 일정이 늘어나지 않을까 싶네요. 예상해서 길게 잡은 일정이지만 막상 해보니 이마저도 짧게 느껴집니다.
UI 개발을 진행하며 css 키워드와 angular 환경에 익숙해졌습니다. 그만큼 이전에 체화하지 못했던 것들을 배웠네요. 완성도를 높여 백엔드와 함께 돌아오겠습니다.
0개의 댓글
