YAPP 동아리 공식 웹 개편

들어가며

지난 IT 동아리 YAPP 19기 활동 이후,  20기에 웹 파트 운영진으로 참여하게 됐다. 웹 운영진이 되고 처음으로 맡은 역할은 YAPP 공식 홈페이지를 개편하는 작업이다. 기존 YAPP 공식 홈페이지는 만들어진지도 오래되었고, 디자인적으로도 관리가 안되고 있는 것 같은 느낌이 들어서 이 참에 새롭게 개편하기로 하였다. 디자인 운영진 3분과 우리 웹 운영진 2명이 작업을 하였는데, 웹 개편 작업이 진행된 과정부터, YAPP 공식 이메일을 폭파시켰던 일까지 기록으로 남겨보려 한다.

 

기존 웹과 개편된 웹

기존 웹

 

개편 웹

 

개편된 웹은 https://www.yapp.co.kr/ 에서 모두 확인할 수 있다.

 

프로젝트 기간

19기 활동이 끝나고 22년 1월 24일부터 공식 웹 개편 프로젝트가 시작되었다.

20기 공식 모집 시작 날짜가 3월 6일 이기 때문에 늦어도 3월 4일 안에는 프로젝트를 완성해야 한다.

 

우리가 구현해야 할 페이지는 다음과 같다.

- Landing 페이지

- Recruit 페이지

- Contact 페이지

- Project 페이지

 

디자인부터 개발까지 한 달 안에 모든 것을 끝내기에는 무리가 있다고 생각해서 채용 단계에 꼭 필요한 페이지를 우선으로 구현하기로 했다. 우선순위를 나열하면 아래와 같은데

Landing 페이지 > Recruit 페이지 > Contact 페이지 > Project 페이지 

 

가장 우선순위가 급한 Landing, Recruit, Contact 페이지를 기준으로 일정을 다음과 같이 잡게 되었다.

 

일정	디자인 팀	개발 팀
1월 24일 ~ 1월 31일	와이어 프레임 완성	개발 스택 선정 및 개발 환경 셋팅
2월 1일 ~ 2월 12일	랜딩 페이지 UI/UX 완성	스타일(Palette, TextStyle, MediaQuery..) 및 프로젝트 구조 셋팅
2월 13일 ~ 2월 18일	Recruit 페이지 UI/UX 완성	랜딩 페이지 구현 및 공통 컴포넌트 제작
2월 19일 ~ 2월 26일	Contact 페이지 UI / UX 완성	Recruit 페이지 구현 및 배포
2월 27일 ~ 3월 4일	디자인 테스트 및 qa	Contact 페이지 구현 및 qa 요청사항 반영

 

와이어 프레임, 디자인 

디자이너분들이 만들어주신 멋진 디자인

와이어 프레임

UI

 

개발 스택

개발 스택은 아래와 같이 정했다.

- next.js

- typescript

- styled-components

- storybook

 

next.js를 선택한 이유는 동아리 홍보 사이트 특성상 SEO가 중요하기 때문에 각 페이지별로 html을 내려주는 next를 선택하게 되었고, styled-components는 짧은 기간 내에 프로젝트를 완성해야 했기 때문에 우리가 가장 익숙하고 잘 사용하는 스타일 라이브러리여서 사용했다. 

 

storybook을 사용한 이유는 크게 두 가지였는데, 첫 번째로는 UI 테스팅 도구로 각 컴포넌트, 페이지를 개발하고 디자이너분이 테스트해주실 수 있도록 하기 위해서였고, 두 번째로는 우리의 공식 웹사이트가 앞으로 21기, 22기, 23기... 운영진 분들이 맡아주실 텐데 유지보수가 잘 되도록 각 컴포넌트를 문서화를 시키기 위해서 스토리북을 사용했다.

 

개발 과정

개발은 백앤드와 통신을 하는 것도 아니었고, 상태들이 복잡한 것도 아니었기 때문에 크게 어려운 점은 없었다. 그러나 배포 관련 이슈가 있었는데, 잘못된 배포로 인해서 YAPP의 공식 이메일 계정이 3일 동안 먹통이 되었던 사건이 있었다.

 

YAPP 공식 이메일 폭파 사건 

웹 개편 작업을 완료하고 배포를 하기 위해서 기존 웹이 어디에 호스팅이 되고 어떤 도메인 서비스를 이용하는지 알아야 했다. YAPP 인수인계 문서에 나온 정보를 보면 기존 웹은 github-pages에서 배포가 되고 있고, 호스팅 케이알이라는 도메인 서비스를 이용하고 있다고 나와있다. 이번에 새롭게 개편한 웹은 vercel을 통해 배포를 했기 때문에 호스팅 케이알에 등록된 기존 웹의 DNS 주소를 vercel DNS 주소로 변경했다.

 

도메인 서비스에 새로운 DNS를 연결했기 때문에 yapp.co.kr에 접속하면 새로운 웹에 연결이 잘됐다. 그래서 나는 모든 게 잘 된 줄 알고 "배포 완료했습니다!" 라고 외친 후 편안하게 쉬고 있었다.

 

그런데 3일 후 회장님으로부터 운영진 단톡방에 "3일 전부터 동아리 공식 계정에 메일이 오지 않는다"라고 카톡이 왔다. 처음에는 대수롭지 않게 여기고, 3일 전에 무슨 일이 있었는지 보던 중 딱 그 타이밍에 내가 공식 웹 dns 주소를 바꾼 시점이었다. 그때부터 뭔가 잘못된 거 같은 느낌이 들어서 회장님과 같이 원인을 파악하기 시작했다.

 

원인을 찾아본 결과, 우리 공식 이메일은 gmail을 사용하지만 커스텀 도메인을 이용해서 yapp.co.kr 을 이메일 (support@yapp.co.kr)로 사용하고 있었는데, 웹을 새롭게 배포하면서 문제가 생긴 것이었다. 이런 커스텀 도메인을 이용하기 위해서는 mx record라는 것을 도메인 호스팅 사이트에 추가로 등록을 해줘야 한다. 기존 웹에서는 dns ever라는 서비스를 이용해서 github-pages DNS 주소와 mx record 주소를 합친 새로운 DNS 주소를 호스팅 케이알 서비스에 연결시켜놨던 것인데, 이번 새로운 웹은 이러한 설정을 해주지 않았다.

 

원인을 파악했기 때문에 바로 수습을 하려고 했지만, 호스팅 케이알에 DNS 주소를 변경하기 위해서는 본인 인증으로 이메일 인증 또는 휴대폰 인증을 해야 한다. 이메일 인증을 하려고 하니 현재 이메일이 막힌 상태여서 휴대폰 인증 밖에 남지 않은 상태였다. 서비스에 등록된 휴대폰 번호의 주인은 YAPP의 1대 회장님 번호인데, 당시 시간은 새벽 2시였고 시간이 너무 늦어서 아침이 돼서야 연락을 드렸다.

 

아침이 될 때까지 매우 불안해서 잠을 못 잤는데, 불안했던 이유는 당시에 회장님께서 여러 회사들과 후원 관련 메일을 나누고 있는 상태였고, 20기 채용까지 얼마 남지 않았던 상황인데 '나로 인해서 후원, 채용 관련에서 문제가 생기면 어떡하지?' 하는 고민 때문에 잠을 자지 못했다. 이후에 이메일이 잘 연결이 된다고 하더라고 이메일이 작동하지 않았던 기간에 와야 할 메일들이 순차적으로 잘 도착할지, 아니면 문제가 해결된 시점 이후에 오는 메일만 도착할지 하는 걱정이 들어서 매우 무서웠다.

 

아침 일찍 YAPP 1대 회장님께 연락을 드린 후 휴대폰 인증을 받아서 도메인을 다시 연결을 하였다. 3일 간 먹통이 되었던 기간에 왔어야 할 메일이 잘 도착할지 걱정이 되어서 공식 메일을 계속해서 모니터링하였다. 처음에는 메일이 도착하지 않았는데 시간이 2~3시간 정도 지났을 무렵 메일들이 막 도착하기 시작했다. 날짜를 보니 먹통이 되었던 기간의 메일들이 순차적으로 오고 있는 것이었다. 그제야 마음이 놓였고 긴장이 다 풀렸다.

 

gmail의 커스텀 도메인 개념을 아예 몰랐던 상태라 이런 일이 발생했었는데 해결되어서 다행이다. (배포 트라우마 걸림) 이렇게 YAPP 공식 웹 개편 1차 개발이 완료가 되었다... (2차는 5월 내로 완료할 예정이다)

 

 

마치며

웹 개편을 완료하고 20기 채용까지 진행을 했는데, 채용 기간에 웹 방문자수가 1300명 이상으로 나와있는 것을 보고 너무 뿌듯했다. 아직 프로젝트 관련 기능도 개발해야 하고, 지금까지 작업했던 내용들을 토대로 문서화도 진행해야 하는데, 남은 일정도 파이팅이다!