#2 라우트 구조 잡기 & 디자인

어떻게 해야 Remix를 활용할 수 있을지 고민중

Table Of Contents

라우트 구조 잡기

카테고리/포스트 페이지를 만들 때가 되니 Remix를 제대로 써먹을 수 있을 지 걱정이 되었다.

Remix는 공식 홈페이지에서 쓰인 사진인데, Remix는 이렇게 중첩되는 컴포넌트에 사용하기 좋다.

rermix 예시 1

rermix 예시 2

블로그에서는 어떻게 해야 이런 구조를 잘 활용하라 수 있을지가 어려웠다.

중심적으로 살펴보아야 할 부분은 아래와 같았다.

다른 사이트 살펴보기

일단 다른 사이트들은 어떻게 라우팅하고 있는지 살펴봤다.

velog

url에 표시되는 시리즈/포스트의 id가 number가 아니다. 심지어 사용자가 지정도 가능하다. url만 보고도 포스트 내용을 알 수 있어 매우 좋았다! 하지만 시리즈가 1차/2차 등으로 종속되는 구조를 만들지는 않는다. 또한 포스트가 무조건 시리즈에 속해야 하는 것도 아니다.

tistory

네이버 블로그

Notion

Notion에서는 breadscrumb를 보여주고 있다. 이를 위해서 모든 페이지의 부모 페이지 - 자식 페이지 구조를 매 페이지마다 통신으로 받아오고 있는 것 같다. 파일 구조도 다음에 뜯어봐야겠다.

서담

서강대학교 커뮤니티인 서담에서는 게시판들을 1차 분류로 묶어주고 있지만, 1차 분류 자체에 페이지는 존재하지 않는다.

신기했던 점은 점은 /board/${boardId}에 해당하는 페이지가 없다는 거였다. 게시판은 페이지 수를 꼭 붙여서만 조회할 수 있다.

…그래서 나는?

우선 굉장히 잡탕 블로그가 될 게 뻔하기 때문에, 대분류가 필요하다.

일상/코딩/철학/취미 등으로 대분류를 나누고, /coding, /philosophy 등의 라우트로 처리해서 서브 블로그 형식으로 사용해야겠다.

그리고 대분류 안에서는 노션처럼 페이지를 구성할 예정이다.

디자인 w/Figma

Figma는 신이야! 물론 아직 모르는 기능이 많다.

포스트 페이지

카테고리 페이지

3일동안 블로그 디자인을 열심히 깎았다. 아직 남은 부분은 많지만…🥰

모바일 → PC 페이지 순으로 작업했던 적이 있는데 작은 페이지를 먼저 채우고 넓은 페이지를 채우자니 너무 힘들어서 이번에는 PC 페이지를 우선으로 작업하게 되었다.

조금씩 바꾸면서 여러 가지를 시도했다!

페이지 중간세이브

디자인은 discord/ velog / notion / postype 등등… 많이 참고했다.