Angular2+ Side Project - Map of Cafe (1)

# 서문

드디어 사이드 프로젝트 두 번째 글을 쓰네요 !

그 이름도 허접한 Map of Cafe !

어차피 사이드 프로젝트기 때문에 이름에 큰 의미를 두지는 않았습니다

오늘 다시 글을 쓸 내용은 .. 디자인과 대략적인 기능에 대한 공유 ? 입니다

첫 글을 올리고 나서부터 바로 작업을 했었는데 벌어먹고 사는 일이 우선이다 보니 이렇게 늦게 되었네요 ㅋㅋ

아래는 파일이구요, 파일당 최대 용량이 10MB라 두 개로 분할했습니다

압축을 풀면 디자인 파일인 map-of-cafe.xd 파일과 대략적인 기능을 정의한 map-of-cafe.xlsx 파일이 있습니다

압축 파일 내에 있는 파일들. 아래는 분할압축한 파일. map-of-cafe.z01 10.00MB map-of-cafe.zip 9.31MB

# 디자인 설명

메인화면(비로그인)

비로그인 메인 화면입니다

지도에는 후기가 등록된 카페에 대해서만 마커가 표시되고 최대 개수 제한을 둘 예정입니다

사용자가 위치정보 공유에 동의하면 현재 위치 주변에 있는 카페를 우선적으로 보여주고, 아닐 경우 지도 중심 좌표를 기준으로 검색을 합니다

지도는 최초에 구글 맵스만 사용하려고 했는데, 화면을 표시할 땐 OpenLayers를 사용하고 카페 검색 시에만 구글 맵스를 사용하는 것으로 계획을 변경했습니다

그 이유는 구글 맵스가 무료 사용량에 제한이 있어서 .. 최대한 사용량을 줄이려고 .. ㅎㅎ

우측 상단에 있는 Sign In 버튼을 누르면 로그인 화면으로 넘어가고, 돋보기 버튼을 누르면 검색창을 표시합니다

메인화면(로그인)

로그인 후 메인화면입니다

우측 상단에 메뉴들이 추가되고 사용자 이름을 표시해줍니다

커엽게 Hello, 사용자! 라는 식으로 표시합니다 ㅋㅋ

지도에 표시되는 내용은 동일합니다

카페 팝업창

지도에 있는 마커에 마우스를 올릴 경우 위와 같이 카페에 대한 정보를 팝업으로 보여줍니다

방문한 카페에 대한 정보를 기록하고 조회하는게 주 목적인 만큼 여러 정보들을 담고 있으며, 평점 등의 정보는 공란으로 표시할 예정입니다

검색영역

우측 상단의 돋보기 버튼을 누르면 표시되는 검색영역입니다

검색어 입력창에 카페명, 주소, 태그명을 입력해서 검색할 수 있고 페이징을 제공합니다

리스트에 표시되는 아이템은 마우스를 올리면 지도상에 있는 해당 카페의 마커 위로 팝업이 떠오릅니다

하단에 있는 아이콘 중 왼쪽은 작성된 글 수, 오른쪽은 방문기록 수 이며 글 등록 버튼을 클릭하면 글쓰기 화면으로 넘어갑니다

검색영역이 활성화 된 동안 우측 상단의 돋보기 버튼은 닫기 버튼으로 변경됩니다

상세메뉴창

상세메뉴창입니다

우측 상단에서 맨 왼쪽에 있는 아이콘을 클릭하면 표시되는 창입니다

회원정보 수정 클릭 시 회원정보 화면으로,

내가 작성한 글, 작성된 글 클릭 시 카페 글 리스트 화면으로,

내가 방문한 카페, 방문 기록 클릭 시 카페 방문 기록 화면으로 이동합니다

내가~ 가 붙는 메뉴는 클릭하면 본인의 글과 방문 기록만 보여줍니다

화면 아무곳이나 클릭하면 상세메뉴창이 닫힙니다

로그인, 패스워드분실, 회원가입 화면

로그인, 패스워드분실, 회원가입 화면입니다

셋 다 똑같아 보이지만 크게보면 메뉴가 조금씩 다릅니다 ㅋㅋ

특별한 내용은 없기에 패스하겠습니다

카페상세화면

카페 상세 화면입니다

제일 상단에는 카페에 대한 기본 정보들을 표시합니다

기본 정보에 있는 평점, 좌석 수 등은 사용자가 작성한 글에서 평가된 점수들로 평균을 내서 표시합니다

두 번째는 이미지 영역입니다

이미지 클릭 시 이미지 리스트 창이 표시됩니다

세 번 째는 방문 기록 영역입니다

해당 카페에 방문 기록을 남긴 사람들의 기록을 볼 수 있습니다

네 번째는 작성된 글 목록 영역입니다

작성일자, 닉네임, 평점, 내용을 표시하며 내용은 한 줄만 표시합니다

마지막은 태그 목록입니다

클릭 시 카페 글 리스트 화면으로 넘어갑니다

카페글리스트화면

카페 글 리스트 화면에선 작성된 글들을 기준으로 목록화하여 볼 수 있습니다

각 아이템은 작성일자, 닉네임, 평점, 이미지, 내용, 카페명을 표시합니다

이미지와 내용은 있을 경우에만 표시되며 둘 다 없거나 하나만 있을 수도 있습니다

이미지를 클릭하면 이미지 리스트 창이 표시됩니다

더 보기 버튼을 클릭하면 카페 글 상세창이 표시됩니다

카페 글 상세창

카페 글 상세창에선 작성된 글에 대한 전체 내용과 모든 평가 항목을 볼 수 있습니다

작성자의 경우 우측 상단에 있는 수정 버튼을 이용해 글쓰기 화면으로 넘어갈 수 있습니다

카페 글 상세창에선 이미지가 표시되지 않습니다

이미지는 밖에서 봅시다

이미지 리스트 창

이미지 리스트 창은 위와 같이 표시됩니다

검은 영역에 이미지를 맞춰서 표시하며, 작은 썸네일이 있는 곳을 보면 우측에 화살표를 이용한 페이징을 제공할 예정입니다

이미지 클릭 시 전체 화면으로 표시를 할 지는 고민을 해봐야겠네요

글쓰기 화면

글쓰기 화면입니다

평점 등의 항목은 슬라이더를 이용해 입력할 수 있도록 하고 이미지는 드래그 앤 드랍 혹은 영역 클릭을 통해 등록할 수 있습니다

내용과 태그는 필요에 따라 추가할 수 있으며 상단에 있는 카페명과 주소가 표시된 영역을 클릭하면 카페검색창을 표시합니다

카페검색창

카페 검색창에선 카페를 검색하고 선택할 수 있습니다

카페를 클릭하면 창이 자동으로 닫히며 글 작성 대상이 해당 카페로 변경됩니다

카페 방문 기록 화면

카페 방문 기록 화면에선 방문 기록을 시간순으로 볼 수 있습니다

읽기 전용 요소이기 때문에 검색 외엔 아무 역할도 없습니다

회원정보수정화면

회원정보 수정 화면입니다

닉네임과 이메일은 기존에 입력된 내용이 표시됩니다

각 내용에 기존과 다른 값을 입력하고 저장 버튼을 누르면 저장이 됩니다

이메일이나 패스워드가 변경되었을 경우엔 로그아웃 처리가 되며, 이메일 변경 시엔 인증 메일을 재발송 할 예정이었는데 이 부분은 사실 바뀔 수도 있을 것 같습니다

굳이 불필요하게 이메일 정보를 저장하기 보다는 최초 회원 가입시에 이메일로 회원가입을 위한 Private 링크를 보내는 게 나을 것 같기도 하고 ..

근데 그렇게 하면 패스워드 분실 시에 어떻게 찾게 할 것인지가 고민이네요

일단 이 부분은 나중에 생각해 보겠습니다

만약 바뀐다면 회원가입 화면도 변경이 될 것 같네요

# 마무리

이렇게 소개를 하고보니 디자인에 참 일관성이 없는 것 같네요 ㅋㅋㅋ

하지만 저는 디자이너가 아니고 사이드 프로젝트일 뿐이니 가볍게 한 번 시작을 해볼까 합니다

아 근데 뭔가 빠트린 것 같은데 .. DB 설계요?

DB 설계는 추후에 다시 들고 오겠습니다 ㅜㅜ 머나먼 코딩의 길

그럼 이만 .. !

from http://devs-diary.tistory.com/40 by ccl(A) rewrite - 2020-03-06 12:54:40