kyu-log
서울대학교 디자인과 졸업 전시 SNU DESIGN WEEK 2025 | WRAP UP 사이트를 설계부터 배포, 운영까지 담당하며 겪은 기술적 의사결정과 구현 과정을 정리합니다.
프로젝트 배경
졸업 전시 사이트 개발 의뢰를 받았을 때, 이전의 외주들과는 성격이 달랐습니다. 50명 이상의 졸업생과 교수, 관람객이 실제로 사용하는 공적인 사이트를 처음부터 설계하고 운영까지 책임져야 하는 일이었습니다. 졸업생 한 명의 이름이 빠지거나, image가 깨지거나, page가 느린 것 모두 누군가의 졸업 전시 경험에 직접 영향을 주는 문제입니다. 이 무게감이 project 전반의 설계 방향을 결정했습니다.
전시 테마는 "WRAP UP"으로, 4년간의 짐을 꾸리는 이사의 현장을 표현합니다. 졸업준비위원회와 첫 미팅에서 정리한 핵심 요구사항은 물리 엔진 기반의 interactive 메인 page, category별 filtering이 가능한 졸업 작품 gallery, Notion data와 연동되는 작품 상세 page, 졸업생 소개 page, 전시 program 일정 및 partner 소개, 그리고 전 page responsive 대응이었습니다.
이 중 Notion 연동이 핵심이었습니다. 50명 이상의 졸업생이 각자의 작품 정보를 Notion에 직접 입력하고, 사이트가 이를 실시간에 가까운 수준으로 반영해야 했습니다. CMS를 별도로 구축할 시간도, 졸업생에게 새로운 도구를 학습시킬 여유도 없었기 때문에, 이미 익숙한 Notion을 CMS로 활용하는 것이 최선이었습니다.
기술 스택과 선택의 이유
요구사항을 기반으로 기술 스택을 결정했습니다. framework는 Next.js 15(App Router)를 선택했습니다. SSR/SSG 지원, metadata 관리, image 최적화가 이 project의 요구에 정확히 부합했습니다. 물리 엔진은 Matter.js, data source는 Notion API, styling은 Emotion(CSS-in-JS), 배포는 Vercel입니다.
구조적으로는 Turborepo 기반 monorepo를 채택하고, pnpm Workspace + Catalog로 dependency를 중앙 관리했습니다. monorepo를 선택한 이유는 관심사 분리입니다. UI component(
@snud2025/ui), API 호출 로직(@snud2025/api), config(@snud2025/config)를 독립 package로 분리하면 각 영역의 변경이 서로에게 미치는 영향을 최소화할 수 있고, 향후 docs site 등으로의 확장도 열어둘 수 있습니다.
개발 과정
개발은 약 4개월(2025년 10월 ~ 2026년 2월)에 걸쳐 18개의 PR, 100개 이상의 commit으로 진행되었습니다.
기반 구축
10월 초, project 초기화와 design system 작업을 먼저 진행했습니다. color, typography, layout, responsive breakpoint를 정의하고, 메인 page의 핵심인 Matter.js 물리 엔진 prototype을 구현했습니다. design system을 초기에 확립한 것은 이후 page 작업의 속도와 일관성에 직접적으로 기여했습니다.
page 퍼블리싱
10월 말부터 12월 초까지 각 page를 하나의 feature branch와 PR로 관리했습니다. 디자인팀과의 review 단위를 page 단위로 맞추기 위해서입니다. 디자이너가 이해할 수 있는 단위로 review를 받으면 feedback cycle이 짧아집니다.
가장 먼저 구현한 것은 People page입니다. 이 순서는 의도적입니다. 각 학생 cell마다 독립적인 물리 엔진 instance를 생성하는 구조가 기술적으로 가장 도전적이었고, 동시에 동적으로 여러 기기를 호환해야할 때, 각 그리드의 테두리를 공유하고 있어야하는 등, 이 부분을 먼저 해결해야 전체 일정이 안정적으로 진행될 수 있었습니다. 이후 Main, About, Works, Partners, Works Detail, Program page를 순차적으로 구현했습니다.
Notion 연동
page publishing이 완료된 12월 초, 실제 data를 연결하는 단계에 진입했습니다. 핵심은 Notion API의 동적 type data를 client에서 사용할 수 있는 type으로 안전하게 변환하는 것입니다. 이를 위해
transformWorks, transformPeople 함수를 구현했습니다.여기서 예상하지 못한 문제를 만났습니다. Notion에서 제공하는 image URL은 약 1시간 후 만료됩니다. 사이트에서 image를 안정적으로 표시하려면 만료되지 않는 URL이 필요했고, Notion의 웹 게시(web publish) link로 변환하는 방식으로 이를 해결했습니다.
QA와 배포
12월 중순, 디자인팀과 전수 검사를 진행했습니다. pixel 단위의 디자인 정합성부터 browser 호환성까지 확인하고, metadata 설정,
robots.txt, sitemap 생성, OG image 최적화를 마치고 12월 15일 Vercel에 첫 배포를 진행했습니다.배포 직후 내부 QA에서 feedback이 즉시 들어왔습니다. "팀이 안 보여요", "tab 정렬이 Safari에서 이상해요" 같은 이슈들입니다. local 환경에서 발견하지 못한 문제가 production에서 드러나는 전형적인 사례입니다. hotfix로 빠르게 대응하고 다시 feedback을 받는 cycle을 반복했습니다.
refactoring과 최적화
전시가 안정적으로 운영되는 동안 code 품질과 성능을 개선했습니다. 중복 code 통합, Path Alias migration을 진행하고, bundle 최적화에서는 최초 요구사항이었던 lottie를 활용한 에니메이팅이 사라짐에 따라, lottie-react를 제거하고 SVG를
next/image로 전환하여 bundle 크기를 평균 46% 절감했습니다.접근성과 SEO
사실 SEO는 챙기지 않아도 된다는 요구사항과는 달리, 전시 종료 후에도 archive로서 가치를 유지할 수 있도록 접근성과 SEO를 강화했습니다. 굳이 인터렉션 위주임에도 불구하고 Next.js 를 택했던 이유도 이곳에 있었습니다. 비슷한 시기에 졸업을 준비하는 사람으로써 졸작은 평생 갖고 가고싶기 마련이기 때문입니다. 저의 작은 선물이랄까요..? 따라서, ARIA 속성, semantic 구조, keyboard navigation을 개선하고, JSON-LD 구조화 data와 작품 page metadata를 강화했습니다. 그 결과 Google 검색에서 Naver보다 상위에 노출되고, Gemini가 사이트 내용을 요약하여 보여줄 수준의 SEO를 확보했습니다.
기술적 도전과 해결
Next.js 속 물리 엔진과 responsive의 양립
Matter.js는 고정 canvas 크기를 전제로 동작합니다. responsive layout에서 canvas 크기가 변할 때 물리 객체의 scale과 position을 동적으로 재계산해야 했습니다.
ResizeObserver 기반의 custom hook을 구현하여 해결했지만, breakpoint 전환 시 자연스러운 transition 처리는 끝까지 완전히 풀지 못한 과제로 남았습니다.Notion API의 한계
Notion은 효과적인 CMS 대체재였지만, API response 구조가 깊고 복잡합니다. 50명 이상의 다양한 입력을 type-safe하게 parsing하는 작업은 방어적 programming의 연속이었습니다. 특히 image URL 만료 문제는 사전에 예측하기 어려운 부분이었고, Notion 공식 문서에서도 명확히 안내하지 않는 제약이었습니다.
50명의 data를 적시에 반영
졸업생들이 Notion에 data를 입력하는 시점이 제각각이었습니다. "제 작품이 안 보여요"라는 연락이 올 때마다 caching 시간과 data 정합성 사이에서 균형을 잡아야 했습니다. cache를 너무 짧게 설정하면 Notion API rate limit에 걸리고, 너무 길게 설정하면 졸업생의 수정 사항이 즉시 반영되지 않습니다. 최종적으로 production cache를 10분으로 설정하여 타협점을 찾았습니다.
project를 통해 얻은 것
공적인 사이트에는 개인 project나 소규모 외주와는 다른 수준의 방어적 설계가 필요합니다. 한 명의 이름이 빠지거나 하나의 image가 깨지는 것이 곧 특정 졸업생의 전시 경험을 훼손합니다. 이 조건이 code의 방어적 설계와 철저한 QA로 이어졌습니다.
디자인과와 협업하면서 PR 단위를 page 단위로 맞춘 것이 효과적이었습니다. 디자이너가 이해할 수 있는 scope로 review를 진행하니 feedback 반영 속도가 빨라졌습니다. 비개발 직군과의 협업에서 review 단위를 상대방의 인지 단위에 맞추는 것은 앞으로도 유효한 전략입니다.
Turborepo + pnpm Workspace 설정에 초기 시간을 투자한 덕분에 공유 package 분리와 build caching의 이점을 전시 운영 내내 활용할 수 있었습니다. 그리고 무엇보다, production 배포 이후가 진짜 시작이라는 점을 체감했습니다. Safari의 tab 정렬 이슈, Notion image cache 만료, 예상치 못한 data 누락은 실제 배포를 경험해야 알 수 있는 영역입니다.
마무리
2025년 10월 첫 commit부터 2026년 2월 SEO 마무리까지, 약 4개월간 18개의 PR을 거쳐 사이트가 완성되었습니다. 설계, 개발, 배포, 운영의 전 과정을 한 project 안에서 경험한 기록입니다. 총 3500여분께서 방문해주셨고, 다음과 같은 지표를 측정할 수 있었습니다. 확실히 SEO를 챙기고난 뒤에는, 한창 전시가 활발히 진행되고있을 시점과도 비교해봐도 무색할만한 좋은 지표를 확인해볼 수 있었습니다.