🌞 개떡같은 코드와 함께한 하루 리뉴얼 이야기

2개월이나 지났지만, 더 시간이 지나면 잊어버릴 것 같아서 하루 리뉴얼에 대한 이야기를 해보려 한다. 워낙 충격적이고 힘든 경험이어서 아직도 어땠는지 기억이 난다.

결과적으로 더러운(…) 경험이었다. 예상치 못한 오류, 쏟아져 나오는 버그, 개떡같은 코드, 완전 뒤죽박죽이었다. 이하 내용은 약 10개월간 내가 무슨 삽질을 했는지에 관한 회고다.

🔥 발단

'하루’는 내가 중학교 3학년 때(2013년) 친구와 졸업작품으로 만든 SNS다. 게시글은 하루만 유지되며, 페이스북의 좋아요 같은 '오호라’를 누르면 글의 유지 시간을 1시간 더 늘려줄 수 있다. 운좋게 언론사에서 인턴을 하던 학교 선배가 기사를 써줬고, 여기저기에 알려졌다.

그런데 특허 문제에 학업에 이런저런 이유로 더 이상 유지하기가 힘들어져서 제대로 신경쓰지 못했다. 반면 글은 나름 꾸준히 올라오고 있었고, 나는 거의 사골 수준으로 내 커리어에 하루를 우려먹었다. (대입 자소서에도 들어갔고, 우아한형제들 인턴 지원서에도 들어갔고, 공모전 이력에도 들어갔다.) 모르는 사람들이 하루 기사를 봤다며 연락을 해오기도 했고, 서비스에 대한 피드백이 들어오기도 했다. 이런 상황이 계속되다 보니 졸속으로 만들어놓은 사이트를 좀 고쳐놔야겠다는 생각을 하고 있었다.

그러다가 대학까지 입학하고, 나는 18학점 밖에 되지 않는 텅텅 빈 시간표 덕분에 시간이 남아 도는 상태가 되었다. 그리고 2017년 5월, 나는 무료로 풀린 스타크래프트 브루드워에 매진하고 있었다. (이후 187패 8승을 찍고 그만뒀다.) 그때 스타크래프트 리마스터가 출시됐는데, 아마 거기에 고무되었는지 하루도 리뉴얼할 때가 됐다는 생각이 들었다.

일단 페이지에 글을 올리고 잤다. 빡센 커리큘럼에 고통을 호소하던 친구를 뒤로하고 나 혼자 개발해야 한다는 생각에 조금 막막해졌다.

그때는 새벽 3시였고, 다음날 10시반 수업이 있었지만 간단하게 감이라도 잡아보려 했다. 테스트 서버를 만들고 간단하게 세팅한 뒤 SSL 인증서를 발급받아 실서비스 서버의 파일들을 그대로 옮겨와봤다. 무료 도메인인 haroootest.tk도 적용시켰다. 생각보다 쉽게 할 수 있을 것 같았다.

하지만 순탄치 않았다. 6월부터 10월까지 작업하고, 이후 미뤄지다가 2학기를 마치고 2018년이 되어서야 다시 리뉴얼 작업에 들어갔다. 처음에는 리뉴얼을 '여름 업데이트’라고 불렀지만 결과적으로는 '18업데이트’가 되었다. (글에 "올해 안에는 끝낼 수 있겠죠?"라고 써놔서 더 찔린다.)

🌜 서버 건드리는 날은 밤새는 날

가장 먼저 해야될 작업은 서버 이전이었다. 기존 서버는 서버에 대해 1도 모르던 시절 세팅해 놓은 것이었기 때문에 찝찝한 마음을 지울 수 없었다. 옮기는 겸 서버 세팅도 제대로 하고 PHP 버전도 올릴 생각이었다. 먼저 네이버 클라우드 플랫폼(AWS와 같은 클라우드 컴퓨팅 서비스)에는 두 컨테이너가 있었다. 하나는 SSL 인증서를 발급받은 테스트 서버였고, 다른 하나는 실서비스 서버였다. 테스트 서버를 초기화하고 실서비스 서버로 쓰는 것이 내 목표였다.

서버를 지우는 것은 어렵지 않다. 그냥 ‘서버 반납’ 버튼만 누르면 된다. 문제는 생성이다. 새로 서버를 생성하면 DNS도 새로 잡아줘야 하고, 세팅도 다시 해줘야 하는데 서버만 건들면 항상 예상치 못한 일이 생겨 밤을 새곤했다. 예전에는 우분투 버전 올리겠다고 뻘짓하다가 새벽 1시부터 시작해 오전 8시까지 잠을 못잔 적도 있다. 한가한 날을 잡고 마음을 다잡은 뒤 새로운 서버를 생성했다.

Putty로 서버에 접속하고 한번에 끝내는 Ubuntu 웹서버 세팅을 참고하며 서버를 세팅했다. 그렇게 삽질이 시작됐다. 당시 나는 CLI에 그리 익숙하지 않았고, 블로그에 나온대로 한다고 똑같이 되는 것도 아니었다. 그래도 처음 서버 생성할 때 별짓을 다 해봤기 때문에 웬만한 문제는 직접 해결할 수 있었다. 문제는 SSL이었다.

🔐 SSL 인증서로 안전한 서버 만들기

기존 서버는 http 프로토콜을 사용했기 때문에 항상 https로 바꿔야한다는 마음의 짐이 있었다. 이건 선택이 아니라 의무였다. 특히 크롬에서 http 사이트에 접속하면 '안전하지 않은 사이트’라는 경고가 떠서 바꾸지 않고는 안 되는 상황이었다. 하지만 생각보다 쉬운 일이 아니었다. 일단 SSL이 뭔지 잘 몰랐다! 먼저 공부부터 했다. 물론 그것이 뭔지 안다는 말이 그것을 사용할 수 있는 말은 아니다. 다만 커맨드를 치면서 내가 뭘하고 있는지 정도는 알 수 있게 되었다.

Let’s Encrypt는 무료로 SSL 인증서를 발급해준다. (예전에는 StartCom SSL로 테스트했는데, 무슨 이슈가 터져서 여전히 안전하지 않은 사이트라는 경고가 떴다.) 일단 발급받고 커맨드를 쳐서 여차저차 적용을 성공했다. 그런데 https://harooo.com/은 접속이 잘 됐지만 http://harooo.com/에 접속했을 때는 https://harooo.com/으로 리다이렉트가 되지 않았다.

왜일까? 이 문제로 이틀 정도를 흘려 보냈는데, 답은 생각보다 간단했다. 아파치 서버 설정을 작성할 때 80포트(http) 설정과 443포트(https) 설정을 하나의 파일 안에서 다룬 것이 실수였다. 아무리봐도 이상한 것 같아서 80포트와 443포트를 분리해 다시 설정을 작성했다.

/etc/apache2/sites-enabled/default-ssl.conf

<IfModule mod_ssl.c>
    <VirtualHost _default_:443>
        ServerAdmin webmaster@localhost

        DocumentRoot /var/www

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        SSLEngine on

        SSLCertificateFile   /etc/ssl/certs/ssl-cert-snakeoil.pem
        SSLCertificateKeyFile/etc/ssl/private/ssl-cert-snakeoil.key

        <FilesMatch "\\.(cgi|shtml|phtml|php)$">
            SSLOptions +StdEnvVars
        </FilesMatch>
        <Directory /usr/lib/cgi-bin>
            SSLOptions +StdEnvVars
        </Directory>
    </VirtualHost>
</IfModule>

## vim: syntax=apache ts=4 sw=4 sts=4 sr noet

이렇게 하고 설정을 활성화했더니 잘 작동했다. 주소창 앞에 나오는 녹색 자물쇠가 너무 사랑스러워 보였다. 고생하며 서버 세팅과 SSL 적용을 마치니 너무 뿌듯했다. 그리고 무엇보다 vi가 정말 좋았다.

🐜 버그 폭발!

예상했던 일이지만 우분투와 PHP, MySQL을 최신으로 업데이트하니 버그가 쏟아져 나왔다. 거의 모든 페이지가 엉망이 되었다. 장난 아니었다. 정말 손댈 엄두가 나지 않았다.

…그래서 2017년 10월 이후로 거의 손대지 못했다. 코드는 충격적일 정도로 개판이었다. mysql_query(...) 같은 구문을 모두 mysqli_query(...)로 바꿔야 했고, fetch_array(...)도 새로운 방식을 써야 했다. 거기다가 html과 javascript, php가 마구 섞여 있어서 정말 아수라장이 따로 없었다. 이해할 수 없는 코드가 가득했고, 이상한 시점에 쿼리를 날리기도 했다. 애초에 잘못된 로직도 있어서 그 부분도 새로 구현해야 했다.

사실 구현과 수정보다는 과거 코드를 해석하는 데 더 오랜 시간을 쏟았다. 코드가 너무 복잡해서 그냥 웹에 띄워진 결과물을 보고 아예 새로 구현하는 게 빠를 것 같았다. 과거의 나를 욕했고, 주석의 중요성을 절실히 깨달았다.

🎨 미세한 UI 개선

사실 하루를 처음 만들 때 나는 html과 css를 잘 몰랐다. 정보 수업에서 짧게 배운 내용과 W3Schools, 그리고 모던 웹 디자인을 위한 HTML5+CSS3 입문으로 공부하면서 만들었다.

그러다보니 디자인과 실제 웹에서의 결과물은 많이 달랐다. 리뉴얼에서 UI 변화는 빠질 수 없을 것 같아서 미세하게나마 개선 작업을 했다.

그나마 index 페이지는 차이가 큰 부분이지 다른 페이지들은 사실 큰 차이가 없다. 그런데 CSS 코드가 워낙 개판이라 이 부분도 완전히 새로 짜야했다. 과거의 나는 왜 그렇게 absolute를 좋아했던걸까.

✨ 미세한 퀄리티 개선

잘 눈에 띄지 않지만 비밀번호 찾기, 이용약관, 개인정보취급방침, 설정 페이지 등 자잘한 페이지들의 디자인과 내용을 개선했다. 졸업작품 발표 때 작은 차이가 큰 차이를 만든다 해놓고 이런 부분에 잘 신경을 안 써놨더라.

🤯 다시는 개떡같은 코드를 쓰지 않겠습니다

엄청나게 힘들었지만 아무튼 끝내긴 했다.

다행히 10개월 간의 삽질을 통해 나름 느낀 점이 있다. 첫 번째는 html, css, javascript, php의 완벽한 분리에 목숨을 걸어야겠다는 것. 두 번째는 쓸모있는 주석을 달아야겠다는 것. 세 번째는 한 번 더 생각하고 코드를 짜야한다는 것. 그리고 마지막으로 현재의 편안함이 나중엔 지옥으로 다가올 수 있다는 것.

많은 수업에서(특히 객체지향프로그래밍) 교수님들은 "당장은 필요없을지 몰라도 나중에 코드를 관리하기 굉장히 편해집니다."라고 말하지만, 잘 실감이 나지 않을 때가 있다. 역시 경험으로 배워야 한다…