Loading Park Labs...
Loading Park Labs...
LAB NOTE No.0162026.02.08개발
Park Labs 웹사이트를 틈틈이 손보고 있다. 최근 며칠 사이 내비게이션을 새로 만들고 이미지를 WebP로 바꿨고, 2월 8일 오늘은 홈 화면에 랩 노트 마퀴를 달았다.
2025년 8월에 처음 만들 때는 "실험 목록 보여주는 포트폴리오"로 시작했다. 근데 만들다 보니까 사이트 자체가 하나의 실험이 됐다. 디자인, 성능, SEO, 국제화. 전부 실험이다.
지금 이 사이트가 하는 역할:
내비게이션은 새로 만들었다. 기존 내비가 투박해서 미니멀 스타일로 다시 짰다. 모바일 내비게이션도 따로 신경 썼다. 바텀 내비 바 방식인데 꽤 괜찮다.
PNG로 올렸던 이미지들은 전부 WebP로 바꿨다. 용량이 절반 이하로 줄었다. Cloudflare Pages에서 서빙하니까 이 정도만 해도 체감 속도가 다르다.
실험 카드에는 리전 배지를 달았다. 각 실험이 타겟하는 시장(글로벌, 일본, 한국)이 배지로 보여서, 어떤 실험이 어디를 노리는지 한눈에 보인다.
랩 노트 마퀴는 오늘 추가한 기능이다. 홈 화면에서 최신 랩 노트들이 천천히 흘러간다. 호버하면 멈추고, 클릭하면 해당 노트로 이동한다. CSS 애니메이션으로 구현했다.
일본 콘텐츠 플랫폼 note.com에서도 글을 쓰고 있어서, 푸터와 모바일 사이드바에 소셜 링크를 추가했다. 일본 시장 실험들이 있으니 일본 플랫폼도 병행하는 게 맞다.
랩 노트 작성도 자동화했다. /note라는 Claude Code 스킬을 만들었는데, 토픽만 던지면 자동 번호 매기기, 3개국어 마크다운 생성, 빌드 검증, 커밋과 푸시까지 한 번에 된다. 노트 쓰는 게 훨씬 편해졌다.
한국어, 영어, 일본어. next-intl로 구현했다. 번역 파일이 벌써 800줄이 넘었는데, 이게 은근 관리가 어렵다. 실험 하나 추가할 때마다 3개 언어로 설명을 써야 한다.
근데 일본 시장 타겟 실험이 있어서(오늘의운세, 우라나이무스메, 케어키로) 일본어 지원은 필수다.
이 사이트의 디자인 테마는 "미래지향적 실험실"이다. 검은 배경에 반투명 카드, 네온 그라데이션. 좀 과하다 싶을 수도 있는데, 실험실 컨셉에는 맞다고 생각한다.
유니콘 진행률 카드에 볼록 유리 효과(convex glass)를 넣어봤다. inset shadow랑 gradient 조합인데, 잘 됐는지는 모르겠다.
처음엔 하드코딩이었는데 마크다운 기반으로 바꿨다. content/notes/ 폴더에 마크다운 파일 넣으면 자동으로 노트가 생긴다. frontmatter로 메타데이터 관리하고, gray-matter로 파싱한다.
카테고리, 무드, 관련 실험 태깅도 된다. 15개 노트가 쌓이니까 이제 좀 블로그 같아졌다.
메트릭 대시보드는 아직 더미 데이터라 실데이터를 연동해야 한다. 실험별 상세 페이지도 개선하고, Lighthouse 점수도 올리고 싶다. 라이트모드는... 이미 다크인데 추가할지 고민 중이다.
사이트 만드는 게 이렇게 재미있을 줄 몰랐다. 다른 실험들의 홈이 되는 곳이니까 계속 잘 가꿔야지.