2023.04.05
- 주제: 책을 읽거나 노래를 듣다가 인상깊었던 글귀 또는 가사를 기록/공유하는 웹사이트
- 로그인/회원가입, CRUD, 카드 컴포넌트로 표시, likes, 댓글, 검색, 태그, 도서/노래 링크
- 반응형?
- PNG 다운로드/공유 기능?
- 잘만 만들면 추후 React Native 등 프레임워크 씌워서 크로스플랫폼화, 서비스로 배포할 수 있을지도
- 프로젝트명: 글마디 (글 구절의 순우리말이라고 함)
- 대충 어떤 모습의 페이지를 만들지 초기화면 디자인을 해보고 있다.
- 초기 화면(index.html)과 글마디 표시 페이지를 우선적으로 구상중이다.
Clean and simple blockquote style
- 글마디 표시 페이지에서 글마디는 위와 비슷한 스타일로 표시하려 한다
- 책 구절과 노래 가사를 글마디 카드 왼쪽 bar 색을 달리하여 구분
- 카드 아래에 작은 글씨로 tag를 표시하고, 카드 내부 오른쪽 아래에 하트 이모지와 함께 likes 수 표시를 한다.
- 카드 표시 table 위에 몇 가지 필터링 버튼을 추가한다. (인기, 최신, 나의 글마디, 공감한 글마디 등)
- 테이블 왼쪽에는 많이 등록된 tag를 표시하고 해당 tag를 클릭하면 해당 tag가 등록된 글마디 카드들을 표시한다.
- table에서 카드를 선택하면 instagram desktop에서 댓글 버튼 클릭시에 피드가 표시되는 스타일과 비슷하게 글마디를 렌더링한다. 이때 렌더링되는 글마디 카드는 blockquote 스타일보다는 실제 카드같은 스타일로(추후 사진으로 저장할만하도록) 표시할 계획임
- 글마디 업로드 버튼을 어디에 위치시킬지 고민이다. 내일 컴포넌트들을 배치해보고 어울리는 곳이 없으면 화면 우측하단 모서리에 floating button으로 하려고 한다
- (참고) 여러가지 quotes 스타일
2023.04.10
- 피그마로 제작한 와이어프레임을 토대로 HTML, CSS를 사용하여 프로토타입 페이지를 만들었다.