[웹 개발] 졸업전시회 사이트 제작 #1

이번에 학교 다른 학과에서 진행하는 졸업전시회 사이트 제작을 맡게 되었다.
보통 졸업전시회 사이트라 하면 외주를 맡기거나, 교내 전산팀에서 학과 홈페이지를 기반으로 구축해주는 경우가 많을 것 같지만, 친구 학과는 예전부터 학생들끼리 졸업준비위원회를 꾸려 직접 도메인/호스팅을 구매하고 자체 개발을 해왔다고 한다.

이번에 디자인을 맡은 친구가 사이트 제작을 전혀 할 줄 몰라서 간절하게 부탁했고, 그리고 내 졸업 심사도 거의 마무리된 시점이라 시간 여유도 조금 생겨서 도와주기로 했다.

 

🤔 시작에 앞서

처음 설명을 들었을 때는 “서버를 대여했다”고 했기 때문에 당연히 리눅스 서버 같은 VPS를 빌린 줄 알았다.

그래서 내가 써본 Flask를 쓸지 Spring을 쓸지 고민하고 있었다.

그런데 막상 호스팅 계정을 확인해보니 웹 호스팅이었다.

대화 내용

그 순간 약간 당황했다. 

써보지도 않은 워드프레스를 써야 하나 고민했지만, 오히려 친구가 "그냥 HTML로 정적 웹사이트 만드는 게 더 낫지 않겠냐"고 해서 흔쾌히 수락했다.

사실 정적 사이트 정도면 정말 어렵지 않다.
게다가 전체 페이지 수는 많아 보여도, 세부 페이지 대부분은 동일한 템플릿에 이미지와 글만 바뀌는 구조라 실질적으로 작업해야 할 페이지는 10장 내외정도 이다.

그래서 그냥 도와주기로 한 김에, 이걸 굳이 블로그에 적어야 하나 싶었지만 어차피 이 블로그는 일기처럼 쓰는 곳이니까 기록해두기로 했다.

 

 

❓ 무엇부터 시작했나?

우선 친구가 공유해준 피그마 디자인부터 확인했다.

피그마 디자인 (일부 생략)

 

디자인을 보는데 생각보다 꽤 잘 만들어놨다. 프레젠테이션 모드를 보면 페이지 간 전환 애니메이션까지 넣어두어서, 어떤 느낌을 원하고 어떤 흐름으로 동작하길 바라는지 정확하게 파악할 수 있었다.
(애니메이션 느낌은 Flutter의 CupertinoPageRoute 전환 느낌과 비슷했다.)

 

 

사이트에 들어가면 가장 먼저 보이는 메인 페이지다.

여기서 View artwork 버튼을 누르면 작품 목록으로,

Creator 버튼을 누르면 졸업 예정자 목록으로,

Exhibition 버튼을 누르면 전시회 설명,

How to come 버튼을 누르면 지도가 뜨는 구조.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Video, Game, New media, Print, Webtoon, Branding 등 분야별로 작품을 모아서 보여주는 페이지다.

전반적으로 3열 그리드 디자인이 공통적으로 적용되어 있다.

우상단의 돌아가기 버튼으로 메인으로 돌아가거나,

작품을 클릭해 상세 페이지로 이동할 수 있다.

 

 

 

작품 제목, 작가 이름과 연락처, 작품 설명, 작품 이미지가 들어간다.	작가 상세 페이지도 작가 이름과 연락처, 작품 사진이 있다. 여기서 작품 사진을 누르면 좌측의 작품 상세 페이지로 이동되도록 구성되어 있다.

 

전시회 위치를 안내해주는 페이지	초대장 페이지도 있다. 초대장은 별도의 팝업 형태로 띄우길 원한다고 했다.

 

 

그리고 마지막으로 전시회 소개, 전시 일정, 준비위원회 명단, 지도 교수 명단 등이 포함된 페이지도 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

😵 문제점

디자인만 보면 정적 사이트라 금방 만들 수 있을 줄 알았는데, 실제 구현 요구사항 중 까다로운 것들이 있었다.

1. 마우스 파티클 효과

마우스 파티클 효과

 

마우스를 따라다니는 파티클 효과를 구현하면서 예상치 못한 문제가 하나 발생했다.
보통 이런 효과는 화면 전체에 고정된 canvas를 깔아두고 그 위에 파티클을 그리게 되는데, 이렇게 하면 스크롤이나 클릭 같은 기본 이벤트가 캔버스에 가로막히는 상황이 생긴다.

그래서 아래처럼 pointer-events: none을 설정해 이벤트를 통과시키도록 처리했다.

canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
}

 

그런데 이렇게 하자 이번에는 아예 파티클이 동작하지 않는 이상한 현상이 발생했다.

원인을 확인해보니, 현재 프로젝트 구조상 index.html에서 각 페이지를 iframe으로 불러오는 방식을 사용하고 있었고, 문제의 canvas는 index.html에 붙어 있었다.

(왜 이런 구조를 선택한것인지는 뒤에서 서술한다.)

문제는 파티클 효과가 index.html에서 생성되고 있음에도 정작 마우스 움직임 이벤트는 iframe 내부에서만 감지되고 있다는 점이었다.
즉, 부모에서 이펙트를 그리는데 event는 자식(iframe)에서 발생하고 있으니, 당연히 index.html 쪽에서는 마우스 정보를 받을 수 없어 효과가 먹통이 되는 것.

결국 이를 해결하기 위해, 기존에 index.html에 있던 마우스 파티클 코드를 외부 스크립트로 분리한 뒤, 각 페이지(iframe 내부 HTML)에서 직접 불러오는 방식으로 변경했다.
즉, 모든 실 페이지가 스스로 마우스 이벤트를 받도록 만들고 동일한 파티클 스크립트를 로드해주는 방식이다.

  <link rel="stylesheet" href="mouse.css" />
  <canvas id="canvas"></canvas>
  <script src="mouse.js"></script>

 

덕분에 이제는 이벤트도 정상적으로 전달되고, 파티클 효과도 페이지 이동과 상관없이 자연스럽게 동작한다.

 

 

2.애니메이션

 

앞에서 설명했듯이, 프로젝트 구조를 index.html + iframe 방식으로 선택한 데에는 분명한 이유가 있다.
아래 GIF처럼 페이지 간 전환 애니메이션을 적용하기 위해서다.

애니메이션 적용 화면

 

각 페이지는 실제로는 별도의 HTML 파일이지만, 이를 index.html에서 iframe으로 로드하고,

전환 타이밍에 GSAP을 사용해 부드러운 화면 전환 효과를 넣었다.

GitHub - greensock/GSAP: GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

 

하지만 이 구조는 주소창에는 계속 index.html만 보이기 때문에, 새로고침을 할 경우 항상 초기 페이지로 돌아가 버린다는 문제가 있었다.

어려운 문제는 아니지만, 이 부분에서 고민을 하게 됐다.
세션을 쓸까? 쿠키로 기억할까? 아니면 해시값을 붙일까?
여러 가지 방법이 떠올랐지만, 가장 간단하고 관리가 편한 방법을 선택했다.

바로 쿼리 스트링을 사용하는 것이었다.

?page=main.html

 

이런 식으로 현재 보여주고 있는 페이지의 파일명을 파라미터로 넘겨주면, 새로고침을 하더라도 아래와 같은 javascript 코드를 통해 iframe이 다시 해당 페이지를 로드하도록 만들 수 있다.

const initialTarget = getUrlParameter('page');
const defaultPage = 'main.html';

const initialUrl = initialTarget || defaultPage;

currentFrame.src = initialUrl;

if (!initialTarget) {
	history.replaceState(null, '', `?page=${defaultPage}`);
}

 

 

 

👉 그래서 어디까지 했나?

나도 졸업 심사가 끝났다고는 하지만 다른 일들이 이것저것 겹치다 보니 여기에만 100% 집중하기는 어렵다.
그래서 중간중간 시간 날 때마다 조금씩 작업을 진행하고 있는 중이다.

지금까지 한 작업을 정리해보면,

1. 마우스를 따라다니는 파티클 효과 구현
2. GSAP 기반의 페이지 전환 애니메이션 적용
3. 메인 페이지 제작
4. 작품을 분야별로 보여주는 리스트 페이지 제작 (약 9페이지 정도)

대략 여기까지 진행된 상태다.

 

작업한 결과물 사진

 

기능적인 부분은 어느 정도 틀이 잡혔고, 전체적인 구조나 흐름도 큰 문제 없이 잘 맞아떨어지고 있다.

 

 

 

🤔 앞으로는 어떻게 할까?

지금까지 잘 만들었지만 이제는 사이트 피드백을 받을 차례다.
일단 현재까지의 페이지들을 보여주고 디자인이나 흐름, 애니메이션 타이밍 등이 자연스러운지 피드백을 받을 생각이다.

그리고 아직 세부 작품 이미지들이 안와서 이것들이 도착할 때까지는 메인 구조만 손보고 기다리는 수밖에 없다.
이미지들이 준비되면 본격적으로 작품별 상세 페이지를 제작하게 될 듯하다.

이번 졸업 예정자가 77명이라고 하니, 상세 작품 페이지까지 포함하면 최소 200장 이상의 페이지를 만들어야 한다... (허허)
숫자만 보면 꽤 많아 보이지만, 다행히 대부분 동일한 템플릿 안에서 사진과 텍스트만 바뀌는 형태라서 실제 작업 난이도는 생각보다 크지 않을 것 같다.

앞으로도 틈틈이 구조 다듬고, 피드백 반영하고, 이미지 들어오는 대로 템플릿 채워 넣는 방식으로 작업이 이어질 것 같다.

 

 

 

 

👍 참고 자료

GSAP 라이브러리

GitHub - greensock/GSAP: GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

 

쿼리 스트링

쿼리 문자열