개요

부산대학교 디자인앤테크놀로지 전공 2025년도 16회 졸업전시에서 저는 웹팀 팀장을 맡게 되었습니다.

팀원은 총 네명이지만, 팀장인 저는 웹 개발, 디자이너 박세은 님은 웹 디자인, 그리고 팀영상 제작을 정일후 님과 김가빈 님이 맡게 되었습니다.

즉 디자이너 박세은 님과 둘이 웹 개발을 맡게 되었습니다.

디자인 피그마 링크

클로즈업이라는 이번 전시 주제를 바탕으로, 메인 화면부터 디자인을 시작하였습니다.

디자이너와 개발자의 철저한 분업을 원한 저는, 디자이너의 디자인에 피드백을 일절 하지 않았고, 디자인에 대한 피드백은 교수님 및 다른 디자이너들에게 제공받을 수 있었습니다.

하지만 웹사이트 개발을 혼자 맡게된 저는, 피드백을 받을 멘토, 교수님이 없습니다.

이에, 트러블 슈팅 블로그를 자세하게 작성하며 하나하나 배워간다는 생각으로 근거를 가지고 구현을 하고자 합니다.

먼저 첫번째로 한 고민은, 사용할 기술 스택입니다.

---

왜 그 기술 스택을 선택했어?

기술스택을 정하기 전에, 저희 웹사이트의 특성을 먼저 생각했습니다.

특성에 맞춰서 이 특성을 제대로 재현할 수 있는 방식으로 기술스택을 정하고자 했습니다.

특성 1 : 전시장 현장에서 맥 한대로 계속 켜 놓고, 관객은 자유롭게 직접 서핑한다.

특성 2 : 가장 많이 사용되는 기능은, 전시장을 찾아온 관객들이 각 디자이너에게 축하의 말을 쓰는 방명록 기능이다.

이러한 특성을 고려해서, 리액트를 활용하여 csr로 구현하고자 했습니다.

특성 1에서 중요한 점은, 전시장에서 한 대의 맥이 하루 종일 켜져 있고 관객들이 자유롭게 탐색한다는 것입니다. 이 경우 초기 로딩은 한 번만 발생하고, 이후 모든 페이지 전환은 클라이언트에서 즉시 처리됩니다. 서버에 요청을 보내지 않아 서버 부하가 없고, 네트워크 지연 없이 부드러운 사용자 경험을 제공할 수 있습니다.

특성 2의 방명록 기능은 실시간으로 업데이트되어야 합니다. CSR 환경에서는 클라이언트에서 상태를 관리하고, Firebase Realtime Database와 같은 실시간 데이터베이스와 연동하여 새 메시지가 추가되면 즉시 화면에 반영할 수 있습니다. 서버 사이드 렌더링처럼 매번 서버에 요청을 보낼 필요 없이, WebSocket이나 실시간 구독을 통해 효율적으로 데이터를 동기화할 수 있습니다.

이에 리액트를 선택하게 되었습니다.

또한 저는 백엔드에 대한 지식이 많이 부족하고 구현 능력이 없기 때문에, 파이어베이스를 사용하고자 합니다. 다만 파이어베이스 스토리지에 사진 파일이나 영상 파일을 올려두고 이를 가져오는 것은 예전 경험상 로딩 시간이 꽤 걸렸던 작업입니다. 이에 탠스택 쿼리를 초기부터 적용하고, 전시장에서 관객의 경험에 문제가 없더록 구현하고자 계획하였습니다.