- 폰트 크기 고려 안했음
- 버튼 디자인 고려 안했음
- 일단 전부 흑백으로 하긴 했는데 ui 에 색상 추가될 수 있음
- 피그마의 컴포넌트 = jspf
현재 필요한 요소 및 아이디어 스케치
로고
이것저것 꽉찬 로고보다는 심플하게 가는게 좋지 않을까?
이미 그림만으로도 화려한데 로고까지 화려하면 가독성이 떨어질 것 같다
로고 레이아웃만 잡아놓고 사이트 내부에서 사용할 폰트를 찾으면서 겸사겸사 로고용 폰트도 찾았는데 맘에 드는 폰트의 라이센스 부분이 좀 걸린다
개인 프로젝트에 사용이 가능하다고는 하는데 결국에 이건 다 포트폴리오가 되는거니까...
그럼 포트폴리오는 상업적인가? 이런 의심이 든 시점에서 이미 이 폰트는 아웃이지만 이 폰트만큼 어울리는게 없었고 미래를 위해서 그냥 라이센스를 구매했다
Display 계열 폰트 중에서는 가장 마음에 들었다
산세리프는 딱딱해서 디자인이 밋밋하고, 세리프나 다른 디스플레이는 너무 과해서 촌스러워지거나 사이트 컨셉과는 심하게 동떨어져서 고민했는데 이건 직선적인 요소와 곡선적인 요소가 적당히 배치되어 있어서 괜찮은 느낌을 받았다
내가 쓰려고 하는 알파벳은 대문자 D랑 N
폰트
GDWEB 사이트에서 디자인들을 탐색해본 결과, 대부분의 사이트들이 세리프와 산세리프 타입 두개를 혼합해서 사용한다
디자이너 성향에 따라서 세리프 대신 필기체를 사용하기도 하고, 강조하고 싶은 내용이나 제목에 어떤 타입을 쓰는지도 달라서 이건 내 소신대로 가야될 것 같다
일단 한국어, 영어 둘 다 지원하는게 전제조건
둘 중 하나라도 깨져서 디자인을 해치면 안되니까
특히 영어쪽은 한국어 지원이 없는 경우가 많아서 한국어로 필터링을 한 다음 선정해야했다
세리프
1. Hahmlet
2. Song-Myong
산세리프
Noto Sans
산세리프는 노토산스가 가장 깔끔하게 떨어지기 때문에 선택
문제는 세리프쪽인데
1번은 정적이긴 한데 볼드 옵션이 굉장히 많고 가변폰트라서 여러 연출이 가능하다
2번은 곡선이 강조되어있고 선 굵기 차이도 많이 난다, 예쁘긴 한데 글씨가 작아지면 가독성이 떨어짐
시선을 끄는 강조 역할로 따지자면 1번보다는 2번쪽이 더 눈길을 끌고
1번은 산세리프랑 그닥 큰 차이점도 보이지 않아서
디자인적인 다채로움은 2번이 더 나을 것 같다
세리프는 송명 - 제목으로 사용
산세리프는 노토산스 - 본문으로 사용
혹시 몰라서 영문 필기체도 하나 선정을 하려는데
일단 필기체라고 해도 어떤 단어인지는 알아볼 수 있게 변형이 많이 되지 않는 폰트들 중에서 Corinthia 라는 폰트를 찾았다
로고+폰트 정리
정해놓으니까 마음이 편하다
참고로 로고를 제외한 폰트들은 모두 피그마가 제공하는 구글 폰트
화면 구상
가로세로 200x700 정도의 크기로 이미지 5개 나열
로그아웃 시
DB에서 랜덤으로 이미지 5개 선정
로그인 하면
유저가 좋아요 해놓은 이미지 랜덤 5개
아니면 가입할 때 받은 유저 선호 정보(작가, 시대) 를 통해 랜덤 5개
각 이미지마다 메뉴 링크랑 연결해서 클릭 가능하게
- 미술사조 (GSAP 로 스크롤 연출)
- 랜덤 도슨트
- 취향찾기 (월드컵)
- 커뮤니티
- 아카이브 (작가, 시대, 색상 세가지만...)
너무 애매하다
따로 데일리 추천 페이지를 만들지 말고
아예 메인 페이지에 데일리 랜덤 추천처럼 매일 다른 그림을 띄우는건?
이 방향이 좋을 것 같다
그림 크기는 뷰포트 기준으로 정해놓고
로그인 + 회원가입
티켓을 활용
이 사이트는 ‘미술관 도슨트’ 사이트
입장하려면 티켓(로그인) 이 필요하다는 의도
그럼 가로형으로 할까 세로형으로 할까?
세로형 디자인 채택
이유는 회원가입 창까지 고려해서...
그리고 외부 아이디로 로그인하는 ui까지 다 넣기엔 가로형은 너무 좁았다
m형 티켓 디자인 채택
다른 티켓에 비해 개성이 있음
실루엣만 봐도 누구나 “티켓이구나” 라고 인지할 수 있음
로그인 티켓 옆에 이미지가 매번 랜덤하게 바뀌도록 할까?
회원가입을 쉽게 만드는 UI/UX 디자인은?
레이아웃 만들 때 참고
로그인-회원가입 창은 서로 티켓 위치만 반대로
탐색
거창한건 안떠오르고
액자 세개정도 화면에 정렬한 다음에
가운데에 있는 액자에 조명을 비춰주면서 그림 하나를 포커싱 해주고
양쪽 빈 액자 위에는 화살표 버튼을 두고 그걸 누르면 다음 랜덤 그림으로 이동할 수 있게
그림을 누르면 도슨트 페이지로 이동
도슨트 페이지는 일단 팝업 구현이 가능하다면 팝업 형태로 변경할 수 있음
260212 1차 정리본
메인 화면에 좋아요랑 다운로드는 빼자
도슨트 페이지에 따로 버튼을 추가하는걸로 하고
260216 2차 정리본
레이아웃은 1차랑 크게 달라진건 없다
전체 페이지를 반응형으로 수정
모바일은 아직 고려를 못했다기보다는 시간 상 못할 것 같다
z 를 누르면 반응형으로 바뀐다
일단 이 이상 피그마에 손댈 것 같지는 않다
현재 부족한 것
- 게시글 작성 및 수정 페이지 활용해보기 > https://tiptap.dev/
- 회원가입 시 취향에 맞는 그림 선택하는 페이지 > 그림 정렬해놓고 클릭하게 하기
