아침에 일어나서, 디자인 시스템 작업을 더 진행했다. 메인 컨텐츠인 블로그에 대한 스켈레톤을 만들었는데, MDX로 관리할꺼라 세세하게 만들어둘려고 한다. header, title, subtitle, p, code block, image 등등.
근데 간격을 각각 주는 것 보단 paper에 gap으로 주는게 좋아보임. code block은 다른 라이브러리로 색상을 넣는게 좋아보임. 직접 구현은 굳이?
다음은 드롭다운, 근데 뭔가 디자인이 아쉽다. 폰트의 문제일까. 폰트는 에이투지 체랑 페이퍼로지 체를 사용했는데, 뭔가 시중에 많이 보던 글씨체인 거 같아. 뭔가 뭔가다, 특유의 잘 만든 디자이너가 아니라, 그냥 학부생이 만든 듯한 느낌이 어디서 오는지 모르겠음. 뭔가 여백의 차이인가? 이 알 수 없는 싸구려...
밥 먹고, 샤워링하고. 포스트 리스트, paper gap, code block, 버튼, 앵커 정도 작업하면 본격적으로 페이지 구현을 해볼 수 있을 듯?
파일 탐색기 느낌의 포스트 리스트 디자인 시스템을 만들었다. 생각보다 귀엽게 나와서 만족, 근데 나중에 구현을 어떻게 할지가 고민이다. 포스트를 MDX로 정적 생성할려는데, 이게 폴더 구조를 어떻게 따라갈지가 고민.
다른 MDX 블로그를 확인해보니, 어짜피 배포 시에 빌드를 하게 됨. 그러면 contents 폴더 안을 탐색해서 DOM 트리를 만드는 유틸로 구조를 아예 가져와서 쓴다더라, 어짜피 이런 방식은 최신화 유지가 어려운건데 빌드를 매번 하기에 문제 없음.
그래서 이걸 한번 MDX로 확인해볼려는데, 메인 페이지에선 폰트가 잘 적용되지 않고 있음을 발견.
폰트는 왜 메인 페이지에서만 적용이 안되고 있었을까?
헤더를 만들면서, 라우팅 구조를 짜봤다. 아이콘도 만들었는데, 나노 바나나가 진짜 너무 멍청해서 순간 화가 났지만, 결국 손으로 리터칭해서 해결했다.
메인 페이지도 조금 넣어봤는데, MDX를 바로 가져다 쓰기엔 무리가 있는 듯. 중간에 파싱하는 유틸이 필요하다고 느꼈다. 내용은 AI가 내 노션이랑 대화 내역을 분석해서 적어줬는데, 손을 많이 대야할 듯.
블로그 뷰를 어느정도 만들어 봤는데, 캐러셀 디자인을 조금 손 보고, MDX 파싱, 읽었던 글(로컬 스토리지) 뭐 이런 로직적인 부분만 해결하면 끝날듯. 코드 블럭도 유용하게 바꿔보고.
(사실 테스트 코드 작성, CI/CD 설정, 스터디 1주차 글 작성 해야함)
(아 스터디에서 PPT를 만들지 말고, 블로그에 발표 모드를 넣어도 좋을 듯)
이제 노션 글을 MDX로 변환하는 것만 클로드에게 튜닝해서 자동화 해보자.