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