[지덕체 개발일지] 서비스 시작, 그 후...

Rudy·2021년 3월 5일
0

지덕체

목록 보기
11/15

안녕하세요. 지난 글에 이어 지적 덕후생활 공동체(지덕체)개발기를 연재하고 있는 ryukim입니다.
지난 글까지는 본격적인 서비스 시작 전 기능 확장 및 리팩토링 과정에 대해 글을 썼는데요.
오늘은 서비스 시작(홍보) 직후 직면했던 문제들과 그 해결과정에 대해 글을 써보려고 합니다.

으아아아악, 버그가 파도처럼 밀려온다!

남몰래 밤에 다녀간 개발자

정식 배포를 계획한 하루 전날 밤, 저와 같은 그룹을 좋아하는 팬들이 어떤 반응을 보일지 궁금해 밤 늦게 먼저 홍보를 해봤습니다.
하지만 분명 개발에 사용하던 노트북에서는 잘 작동하는 페이지가 다른 환경에서는 서버 에러를 내는 것 이었습니다.
서버가 클라우드 상에 있다보니 개발할 때처럼 바로 로그를 확인하기도 어렵고 일단 급하게 글을 내리고 디버깅을 시작했습니다.

개발 환경에서는 잘 작동했던 것으로 보아 쿠키나 로컬 스토리지를 다루는 코드에서 문제가 발생했을 것이라고 예상했고 로그를 살펴보니 실제로 auth체크를 하는 API에서 오류가 발생헀습니다.
저의 코드 구조 특성상 프론트의 모든 페이지에서 auth 체크를 하므로 접속하자마자 서버 에러가 났던 것입니다.

이정도는 괜찮겠지 같은 건 없다

다음 날 일어나자마자 한 번 더 테스트해보고 이번에는 저희 42 슬랙에 링크를 공유했습니다.
멘토님께서는 보시자마자 비로그인시 접근할 수 없는 페이지가 잠시 렌더링 되었다가 리디렉션되는 문제를 지적해주셨습니다.
사실 이 문제는 개발 중에도 알고 있었는데 워낙 빠르게 지나가기도 하고, 실제로 이렇게 구현되어있는 페이지도 많이 봤던 것 같다는 생각에 그냥 넘어갔었습니다.

이 이전에도 저는 종종 찾기 힘든 예외는 그냥 넘어가면 안 될까하는 태도를 가지고 있었습니다. 하지만 개발자라면 그 어떤 에러와 예외도 그냥 넘어가서는 안된다는 것을 42과정을 하며 많이 느꼈고, 이 날도 다시 한 번 되새기고 에러를 수정하기 시작했습니다.
막상 고쳐보니 구현은 크게 어렵지 않았습니다. 기존에 hoc를 이용해 권한에 따른 접근 제한 기능을 구현해두었었고, 여기에 간단히 렌더링해도 되는지에 대한 플래그만 하나 추가하는 방식으로 해결할 수 있었습니다.

아무리 여러 번 테스트해도 놓치는 부분은 있다

이후에 슬랙에서 동료 한 분이 상품 업로드 페이지에서 기본 값으로 설정되어있는 아티스트의 경우 선택 되어있는 것처럼 보이지만 실제로는 선택 되지 않은 상태인 것을 발견해주셨습니다.
API에서 GET할 때 state에 값을 설정해주는 간단한 방식으로 해결할 수 있었지만 직접 테스트를 여러 번 했음에도 놓친 사례였습니다.

(이 간단한 한 줄로 해결할 수 있었습니다.)

또 같은 동료 분이 찾아주신 버그 중 하나는 상품 업로드 시 펀딩 종료 날짜가 펀딩 시작 날짜보다 빠르게 설정될 수 있는 문제였습니다.
개발 중 테스트할 때는 펀딩 시작일이 종료일보다 늦은 경우만 고려하여 발생한 문제로, 이런 사소한 부분도 정말 놓치기 쉽고 그렇기에 테스트 환경 구축이 정말 중요함을 느낄 수 있었습니다.

댓글이 서버 잡네

42 슬랙에 공유하고 얼마 지나지 않아 다시 한 번 서버가 다운 되었습니다. 멘토님께서 또 하나 찾아주신 버그였는데요. 바로 비로그인 시에 댓글작성이 가능한 문제였습니다.
저의 댓글 모듈은 유저 정보를 반드시 전송하도록 되어있었는데 비로그인 시에 댓글 작성이 가능하니 Comment 테이블의 유저 필드에 빈 값이 들어갔고, 이를 불러오는 과정에서 오류가 난 것이었습니다.

다행히 DB에서 해당 레코드를 삭제함으로서 일단 오류를 복구할 수 있었습니다. 이후 임시 방편으로 비로그인 시 댓글 모듈이 렌더링 되지 않도록 막았고, 모듈 수정을 통해 비로그인 시 댓글을 볼 수는 있지만 작성창은 렌더링되지 않도록 수정할 수 있었습니다.

홍보를 위한 작업

처음으로 제대로 살펴본 index.html

숨가쁜 디버깅이 끝난 후 멘토님께서 홍보를 위해 메타데이터를 추가하라고 하셨습니다.
처음에는 무슨 말인지 몰라 한참을 헤맸고, 멘토님께서 다른 웹페이지의 index.html을 보면 힌트를 얻을 수 있을 것이라고 알려주셨습니다.
그렇게 블라블라와 신문사 홈페이지를 참고하여 저만의 메타정보를 완성할 수 있었습니다.

SEO

메타데이터를 추가하기 위해 정보를 찾던 과정에서 저는 SEO라는 것을 알게 되었습니다.
Search Engine Optimization(검색엔진 최적화)은 검색엔진이 크롤링할 때 효과적으로 정보를 수집해갈 수 있도록 하는 과정입니다.

가장 간단한 방법 중 하나는 사이트맵 제출과 robots.txt 설정으로 저는 다음 블로그를 참고하였습니다.
또 다른 방법 중 하나는 바로 SSR(Server Side Rendering) 정확하게는 Universal Server Side Rendering 입니다.

제가 프론트에 사용한 react를 비롯하여 최근 많이 사용되는 대부분의 프론트 프레임워크(라이브러리)들은 SPA(Single Page Application)로 서버에서 HTML, CSS, JS 등 정적 파일들을 클라이언트 사이드로 Serve하면 브라우저에서 CSR(Client Side Rendering)을 통해 화면에 정보를 띄워준다는 것을 알게 되었습니다.

전통적 SSR과 달리 Universal SSR은 클라이언트에서 처음 보게 되는 페이지만 SSR로 처리하고 나머지는 CSR로 처리하는 구조로 기존 CSR의 단점인 SEO가 힘들다는 점과 초기 로딩속도가 느리다는 점을 보완하면서 CSR의 장점인 사용자의 이벤트에 빠르게 대응할 수 있다는 점까지 모두 살린 방식이라는 것을 공부를 통해 알게 되었습니다.

저는 SEO를 위해 Universal SSR이 필연적이라고 생각했고, 다만 구현이 상당히 어려운 것으로 보여 CI/CD 구축과 모바일 뷰 최적화 작업을 마친 후 조금씩 도전해보기로 마음먹었습니다.

고객들은 절대 내가 원하는대로 움직여주지 않는다.

이메일 인증이 필요한 이유

개발을 하면서 회원 가입 시 이메일 인증이 필요할까 고민한 적이 있었습니다. 당시에는 구현이 쉽지 않을 것 같고, 알려지지 않은 서비스인데 가입까지 복잡해지면 사용자 유입에 장벽이 될 수도 있겠다는 생각에 추후 필요하면 구현하기로 마음 먹었습니다.

하지만 막상 42와 주변 지인들에게 홍보해본 결과 고객들은 절대로 내가 원하는대로 움직여주지 않는다는 것을 알게 되었습니다. 대부분 존재하지 않는 이메일로 가입을 하는 것이었습니다!!
물론 지덕체는 사용자 타겟층이 확실한 서비스라 지인들이 가입 후 지속적으로 활동할 가능성이 적고 테스트 목적으로 가입해보는데 실제 이메일까지 넣기에 부담이 될 수도 있다는 생각이 들었습니다. 다만 실제 타겟 유저들에게 홍보했을 때도 같은 일이 발생하지 않으리라는 보장이 없다고 생각했습니다.

그래서 급하게 구현하기 시작했고 다행히 라이브러리가 잘 갖춰져있어 쉽게 구현할 수 있었습니다.
저는 다음 블로그를 참고하여 구현했으니 혹시 관심있으신 분들은 참고하시면 좋을 것 같습니다.

지난 글에서 적었던 4주차 과제 중 유저 계층화 작업을 통해 level필드를 미리 생성해 둔 덕분에 인증 코드 필드 외에 따로 DB 모델을 건드리지 않고 기존 가입자부터 신규 가입자까지 모두 필수적으로 이메일 인증을 통과해야만 서비스를 이용할 수 있도록 구현할 수 있었습니다.

이렇게 오늘은 라이브 환경에서 실시간으로 오류에 대응하고 새로운 기능을 추가한 과정에 대해 적어봤습니다.
대부분 사소한 실수나 예외사항들이 많아 디버깅 자체는 그렇게 어렵지 않았는데요. 다만 사용자가 이미 존재하는데 접속할 수 없다는 상황 자체가 엄청난 압박감으로 다가왔습니다.

이 과정에서 가장 크게 느낀 것은 체계적인 테스트 환경이 정말 중요하다는 점이었습니다.
또 하나는 직접 서버에 ssh환경으로 접속해 git pull하고 그 과정에서 잠시 서버가 다운되는 과정이 상당히 소모적이고 위험한 방법이라는 점이었습니다. 이를 통해 CI/CD 환경 구성의 필요성을 정말 절실하게 느낄 수 있었습니다.

다음 글에서는 CI/CD 환경 구성과 디자인 개선, 모바일 뷰 최적화 과정에 대해 글을 써보도록 하겠습니다.
오늘도 긴 글 읽어주셔서 정말 감사합니다!

(해당 시리즈는 42서울 블로그에 있던 저의 글을 velog로 옮긴 것임을 밝힙니다.)

profile
Run, as you always do

0개의 댓글