210706(화) - 디자인 시안 마무리

디자인

1. 메인 페이지

기존 디자인

변경된 디자인

시각적인 효과를 극대화하기 위해서 원 그래프로 정보를 제공하면 좋겠다고 생각했다.

메인 페이지 하단 게시판 미리보기의 각 칸 예시

왼쪽 상단부터 2번째 칸(백신 티켓 - 아스트라제네카)이 백신의 티켓과 접종 여부의 수평, 텍스트, 오른쪽 하단의 시간 표시가 안정감을 주는 구조로 되어 있어서 가장 이상적이라고 생각했다.

이전 그림의 6개의 후보에서 왼쪽 상단에서 2번 째 칸을 선정하여 배치한 결과

색은 코로나19 예방접종 대응추진단에서 제공하는 백신 고유 색깔 인식표를 참고하여 티켓 색으로 참조했다. 정확한 색은 전체적인 디자인을 위해서 웹 접근성을 고려하면서 채도를 조금 낮춰 더 연한 색으로 변경할 계획도 가지고 있다.

백신 고유 색깔 인식표 가이드

2. 접종 후기 페이지

접종 후기 페이지 글 목록 각 칸 후보들

위의 후보들 중에서 3번 째를 선택하여 목록 구성

일반 게시판에서 백신이라는 요소가 포함되어 글 목록을 구성하는데 어려움이 있었다. 메인 페이지에서 게시판을 간략하게 보여주는 템플릿과 통일시키는 게 맞다고 생각했다. 게시판 글 목록의 행의 개수는 메인 페이지에서 2개였기 때문에 이 페이지에서도 통일시키고자 했는데, 일단 한눈에 들어오지 않는다는 페어의 의견이 있어서 한 줄로 했다.

3. 글 작성 페이지

글 작성 페이지

글 작성 페이지는 어제 논의한 대로 모달의 형태로 만들 예정이고, 각 백신의 선택에 따라 백신 고유 색깔 인식표의 색을 참고할 예정이다.

4. 글 상세 페이지

글 상세 페이지

사용자 관련 정보(닉네임 또는 이름, 프로필 사진), 백신 관련 정보(백신 종류, 접종 인증 여부), 글 관련 정보(조회수, 작성 시간, 텍스트, 좋아요, 댓글 수 등) 등 페이지를 구성하는 정보가 많아서 처음에 페이지를 구성할 때 어려움을 겪었다. 에브리타임, 블라인드 등 레퍼런스를 참고했지만, 백신 정보를 어디에 어떻게 구성할지 고민되었다. 결국 메인 페이지, 후기 목록 페이지의 글 목록과 같이 백신의 티켓과 접종 여부를 맨 위 그리고 양 끝에 배치하기로 결정했다. 여러 위치에 시도해봤지만 가장 안정적인 구조라고 생각되었기 때문이다.

 

백엔드와의 협의

글 한 번 쓰기 / 글 여러 번 쓰기 (수요일 논의) - 글 여러 번 쓰는 것으로

한 번 쓴다고 하면 인증 사진을 글을 쓸 때 첨부하는 게 괜찮은데, 여러 번 쓰게 한다면 인증 사진을 매번 올리는 게 좀 불편할지도? (수요일 논의) - 인증은 마이 페이지에서 하는 것으로

닉네임으로 받아올지, 진짜 이름으로 받아올지 (수요일 논의) - 일단 닉네임으로 중복을 생각하지 않고(네이버와 카카오 로그인의 중복)