2025 서울대학교 디자인과 전시 사이트 외주를 리드하며

서울대학교 디자인과 졸업 전시 SNU DESIGN WEEK 2025 | WRAP UP 사이트를 설계부터 배포, 운영까지 담당하며 겪은 기술적 의사결정과 구현 과정을 정리합니다.

프로젝트 배경

졸업 전시 사이트 개발 의뢰를 받았을 때, 이전의 외주들과는 성격이 달랐습니다. 50명 이상의 졸업생과 교수, 관람객이 실제로 사용하는 공적인 사이트를 처음부터 설계하고 운영까지 책임져야 하는 일이었습니다. 졸업생 한 명의 이름이 빠지거나, 이미지가 깨지거나, page가 느린 것 모두 누군가의 졸업 전시 경험에 직접 영향을 주는 문제입니다. 이 무게감이 프로젝트 전반의 설계 방향을 결정했습니다.

전시 테마는 "WRAP UP"으로, 4년간의 짐을 꾸리는 이사의 현장을 표현합니다. 졸업준비위원회와 첫 미팅에서 정리한 핵심 요구사항은 다음과 같습니다.

물리 엔진 기반의 interactive 메인 page

졸업 작품 gallery (category별 filtering)

작품 상세 page (Notion data 연동, 졸업생이 직접 수정 가능)

졸업생 소개 page (각 학생의 수강 class를 시각적으로 표현)

전시 program 일정, 후원사/partner 소개

전 page responsive 대응 (mobile/tablet/desktop)

이 중 Notion 연동이 핵심이었습니다. 50명 이상의 졸업생이 각자의 작품 정보를 Notion에 직접 입력하고, 사이트가 이를 반영해야 했습니다. CMS를 별도로 구축할 시간도, 졸업생에게 새로운 도구를 학습시킬 여유도 없었기 때문에, 이미 익숙한 Notion을 CMS로 활용하는 것이 최선이었습니다.

기술 스택

요구사항을 기반으로 기술 스택을 결정했습니다.

Next.js 15 (App Router): SSR/SSG, metadata, image 최적화

Turborepo monorepo: 공유 package 분리 (@snud2025/ui, @snud2025/api, @snud2025/config)

pnpm Workspace + Catalog: dependency 중앙 관리

Matter.js: 물리 엔진 기반 interaction

Notion API: 작품/학생 data source

Emotion (CSS-in-JS): design system을 code로 구현

Vercel: 배포 및 운영

monorepo를 선택한 이유는 관심사 분리입니다. UI component, API 호출 로직, 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을 구현했습니다.


68aed6b Initial commit: SNU Design Week 2025 project (10/04)
3e9b1f0 feat: color, layout, typo 시스템 설정 (10/05)
a7041da feat: matter-js 관련 helper 함수 및 물리엔진 구현 (10/05)

page 퍼블리싱 (10월 말 ~ 12월 초)

각 page를 하나의 feature branch와 PR로 관리했습니다. 디자인팀과의 review 단위를 page 단위로 맞추기 위해서입니다. 디자이너가 이해할 수 있는 단위로 review를 받으면 feedback cycle이 짧아집니다.

PR	날짜	내용
#7	10/24	People page — 물리 엔진 기반 grid, HoverStone component
#8	11/04	Main page — PhysicsScene, Header/Footer, responsive
#9	11/13	About page — 전시 소개, 조직 정보
#10	11/16	Works page — 작품 gallery, category filter
#12	11/20	Partners page — 후원사 card/logo
#13	11/24	Works Detail page — 작품 상세 UI
#15	12/01	Program page — 전시 program 일정

People page를 가장 먼저 구현한 것은 의도적입니다. 각 학생 cell마다 독립적인 물리 엔진 instance를 생성하는 구조가 기술적으로 가장 도전적이었고, 이 부분을 먼저 해결해야 전체 일정이 안정적으로 진행될 수 있었습니다.

Notion 연동 (12월 초)

page publishing이 완료된 후, 실제 data를 연결하는 단계입니다.

PR	날짜	내용
#17	12/05	Notion DB 연동 — API 호출, data 변환, caching 전략

Notion API의 동적 type data를 client type으로 안전하게 변환하는 transformWorks, transformPeople 함수를 구현했습니다. Notion image URL은 약 1시간 후 만료되는 문제가 있어, 웹 게시 link로 변환하는 방식으로 해결했습니다.

QA와 디테일 (12월 중순)

디자인팀과 전수 검사를 진행했습니다. pixel 단위의 디자인 정합성부터 browser 호환성까지 확인합니다.

PR	날짜	내용
#19	12/08	1차 QA — 메인 page block 동적 styling, 디자인 디테일
#21	12/11	Works/People 디자인 디테일 — Header SVG 전환, dark mode 대응

배포 (12/15)

metadata 설정, robots.txt, sitemap 생성, OG image 최적화를 마치고 Vercel에 첫 배포를 진행했습니다.

PR	날짜	내용
#23	12/15	1차 배포 — metadata, sitemap, Vercel/Turbo cache 설정
#25	12/17	2차 QA — browser tab 정렬, caching 시간 조정, Analytics 추가
#26	12/18	hotfix — 누락된 팀 추가

배포 후 내부 QA 도중 feedback이 즉시 들어왔습니다. "팀이 안 보여요", "tab 정렬이 Safari에서 이상해요" 같은 이슈들입니다. local 환경에서 발견하지 못한 문제가 production에서 드러나는 전형적인 사례였습니다. 이들을 빠르게 수정하고, 다시 피드백을 받았습니다.

refactoring과 최적화 (12월 말)

전시가 안정적으로 운영되는 동안, code 품질과 성능을 개선했습니다.

PR	날짜	내용
#28	12/21	1차 refactoring — 중복 code 통합, Path Alias migration
#31	12/21	bundle 최적화 — lottie-react 제거, SVG를 next/image로 전환. bundle 크기 평균 46% 절감

접근성과 SEO (12월 말 ~ 2월)

전시 종료 후에도 archive로서 가치를 유지할 수 있도록, 접근성과 SEO를 강화했습니다. 그 결과 Naver 보다도 높은 위치에 존재하고, Gemini 가 요약하면서도 보여줄 정도의 SEO를 갖게 되었습니다.

PR	날짜	내용
#33	12/29	접근성 개선 — ARIA 속성, semantic 구조, keyboard navigation
#34	02/07	SEO — JSON-LD 구조화 data, 작품 page metadata 강화

기술적 도전과 해결

물리 엔진과 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이 약 1시간 후 만료되는 문제는 사전에 예측하기 어려운 부분이었고, 웹 게시 link 변환 방식으로 우회했습니다.

50명의 data를 적시에 반영

졸업생들이 Notion에 data를 입력하는 시점이 제각각이었습니다. "제 작품이 안 보여요"라는 연락이 들어올 때마다 caching 시간과 data 정합성 사이에서 균형을 잡아야 했습니다. 최종적으로 production cache를 10분으로 설정하여 타협점을 찾았습니다.

프로젝트를 통해 얻은 것

공적인 사이트에 요구되는 방어적 설계. 개인 project나 소규모 외주와는 수준이 다른 안정성이 필요합니다. 한 명의 이름이 빠지거나 하나의 image가 깨지는 것이 곧 특정 졸업생의 전시 경험을 훼손합니다. 이 조건이 code의 방어적 설계와 철저한 QA로 이어졌습니다.

PR 단위의 협업 설계. 디자인과와 협업하면서 PR 단위를 page 단위로 맞춘 것이 효과적이었습니다. 디자이너가 이해할 수 있는 scope로 review를 진행하니 feedback 반영 속도가 빨라졌습니다.

monorepo의 초기 비용과 장기 이점. Turborepo + pnpm Workspace 설정에 시간을 투자한 덕분에, 공유 package 분리와 build caching의 이점을 전시 운영 내내 활용할 수 있었습니다.

production 배포 이후가 진짜 시작. local에서 문제없던 것이 production에서 깨집니다. Safari의 tab 정렬 이슈, Notion image cache 만료, 예상치 못한 data 누락 등은 실제 배포를 경험해야 체감할 수 있는 영역입니다.

마무리

2025년 10월 첫 commit부터 2026년 2월 SEO 마무리까지, 약 4개월간 18개의 PR을 거쳐 사이트가 완성되었습니다. 서울대학교 디자인과 졸업 전시 "WRAP UP" 사이트를 만들면서 설계, 개발, 배포, 운영의 전 과정을 경험한 project였습니다.