Jaejoon Jeong
2020~2021년, 나의 첫 홈페이지 프로젝트
시작은 아름다웠으나 끝은 아쉬운, 그래도 나름 의미 있는 포트폴리오
[홈페이지 프로젝트 바로가기]
[Github 저장소 바로가기]
[관련 블로그 글 보기]
2020년 9월 전역 후 2021년 3월 복학 전까지 약 6개월 간 제게는 엄청난 자유시간이 있었습니다. 사실 저 개인적으로는 너무 아쉬운 시기로 기억됩니다. 코로나19만 없었다면 저는 배낭여행이라도 떠났을 것이고, 수영도 배워보려고 했을 것입니다. 지금 아무것도 못한 채로 연구실 생활을 하고 있습니다.
집에 갇힌 채로 의미 있는 활동을 하기란 쉽지 않습니다. 그때 선택한 것이 바로 ‘개발 연습’이었죠. 어차피 2학년 때부터 할 테니까 미리 배워보자 하는 마음이었습니다. 그렇게 본격적으로 시작된 개발자의 인생. 이 시기에 한 것으로, 대표적으로 뒤에서 소개해드릴 안드로이드 앱 개발과, 여기서 소개할 HTML 기반 홈페이지 프로젝트가 있습니다. 시기상 안드로이드가 먼저긴 하지만, 일회성이었기 때문에 먼저 소개해드립니다.
[원래는 진짜 홈페이지로 구상했던 프로젝트]
전역 후 저는 본격적으로 블로그를 시작했지만, 블로그는 일상 공유 느낌에 가깝지 포트폴리오 자체로 쓰려면 제대로 관리해줘야 하는 단점이 있습니다. (글이 밀리기 때문이죠.) 그래서 다른 많은 개발자의 자기소개 페이지처럼 저도 저만의 멋진 페이지를 만들고 싶었습니다. 그리고 장기적으로는 꾸준히 관리해서 취업할 때도 활용할 수 있는 진짜 포트폴리오로 연계하고 싶었지요.
그래서 2020년 11월 Github 계정을 만들었고(호스팅 그리고 훗날을 위해), 12월부터 본격적으로 웹 공부를 시작했습니다. W3Schools 사이트를 많이 참고했습니다.
[HTML, CSS, JS ‘쌩코딩’으로 완성하다]
요즘 홈페이지나 서비스를 구현할 때는 너무도 잘 되어 있는 수많은 웹 라이브러리(Express.js, Django, Ruby, React, Angular 등등..)를 사용합니다. 멀리 갈 것도 없고, 제가 웹 공부를 시작했던 2020년의 캡스톤 디자인 영상을 돌려봐도 다 그렇습니다. 하지만 당시 제 입장에서 라이브러리를 활용하는 것은 어불성설이라 느꼈는데요, 그 이유는 그러한 라이브러리가 결국 HTML, CSS, JS 기반으로 돌아가는 것이기 때문에 이들을 이해하지 않고서는 저 라이브러리 역시 올바르게 이해할 수 없다고 봤기 때문입니다. 설령 이해 없이 저런 것을 사용한다면 문제가 발생했을 때 더더욱 이해하기 어렵겠죠. 그래서 저는 밑바닥부터 이해해보자는 마음으로 필요한 HTML, CSS, JS 코드를 직접 찾아보며 원하는 모양을 만들어보려고 했습니다.
HTML로 원하는 디자인을 구현하는 것은 쉽지 않은 일이죠. 코드를 계속 바꿔가며 계속 시도했습니다. 그렇게 나온 결과물을 2020년 12월쯤 블로그에 연습 삼아 올리기도 했고요, 자신감이 붙은 저는 이들을 기반으로 블로그 위젯도 새단장했습니다.
연습3: 이거 보니까 딱 봐도 홈페이지 프로토타입이죠? ㅋㅋ
그렇게 어느 정도 준비가 되었다고 생각한 저는, 2021년 1월 4일부터 홈페이지 프로젝트를 본격적으로 개시합니다. 쉬운 것부터 복잡한 것, 큰 것부터 작은 것 순서로 완성해 나갔습니다. 메인 화면, About(소개), Project(프로젝트), Post(포스트), Contact(연락처) 탭을 준비했고, 반복되는 영역(상단 header/하단 footer)은 복붙하는 식으로 진행했습니다. 디자인이 추가될 때마다 CSS도 한 줄씩 추가했습니다. 보는 재미를 주기 위해 hover 기능을 적극 활용하려고 했습니다.
그렇게 작업은 막바지로 흘렀고, Post(포스트) 영역을 제일 마지막으로 완성하게 되었는데요, 동적 글 목록을 구현하기 위해 이 부분에만 Javascript 코드를 활용했습니다. 글 목록은 json 형식으로 만들어 Github에 올려두고, 그 파일을 읽어 자동 생성하여 표시해주는 방식을 취했습니다.
그렇게 약 2주가 지나 1월 18일이 되었습니다.
[Github Page 게시, 그리고 처음 몇 달]
페이지에 오류가 없음을 확인한 저는 Github 저장소를 만들어 파일을 모두 올렸고, Github Pages 기능을 활성화하여 호스팅했습니다. 그렇게 저의 첫 홈페이지가 세상에 공개되었고, 블로그에서도 홍보를 시작했습니다.
당초 계획에서는, 블로그에서는 조금 더 일반적인 내용을 다루고, 홈페이지의 Post 탭에서는 조금 더 개인적인 이야기를 올리려는 구상을 했습니다. 지금 남아 있는 흔적을 보신다면, 학기 시작 후 바쁜 일상에 대한 생각을 가볍게 남긴 것을 알 수 있을 것입니다.
한편, 아무도 모르게 이벤트를 하나 기획했는데요, (지금은 종료했습니다 ^=^) 홈페이지에 올린 글을 보고 블로그의 특정 글에 댓글을 남긴 사람 중 추첨을 통해 기프티콘을 주기로 했었습니다. 그런데 아무도 관심을 안 가졌는지 해당 글에 댓글이 단 하나도 달리지 않았습니다. (!!!!)
딱히 읽었다는 티도 안 나고 (방문자 카운터도 없으니…) 바쁘고 그러니 글을 올려야지 올려야지 하면서도 잘 안 되더라고요. 그렇게 처음 몇 달 간은 꾸준히 방문을 하다가, 저조차도 5월 쯤부터는 잘 들어가지 않게 되었습니다. 그해 6월부터 연구실 생활을 시작한 후부터는 더욱이요.
[지금은?]
그때도 그때지만, 요즘은 쌩코딩하는 사람이 더더욱 없잖아요. 다 라이브러리 갖다 쓰지. 결국 저의 첫 홈페이지 프로젝트는 2021년 4월 이후로 Github에 변화 없이 박제되고 말았습니다. 사실 여기에 글을 올리려면 Github에 수정된 파일을 직접 올려야 해서 번거롭다는 점도 있었습니다. 블로그는 내용만 쓰면 알아서 올려주잖아요.
어느 순간부터 저는 그 페이지를 진짜 포트폴리오로 남기기로 하고, 지금은 수정을 하지 않고 2021년 당시 저의 생각을 둘러볼 수 있는 추억의 공간으로 남겨두기로 하였습니다.
[정신적 후속작]
지금 보시는 이 홈페이지가, 그런 의미에서 이 홈페이지의 정신적 후속작(?)이라고 할 수 있겠습니다. 정식 후속작이 아닌 이유는 구현 및 유지보수 방식이 전혀 다르기 때문이며, 성격도 다르기 때문입니다. 이 홈페이지는 Jekyll과 Github Actions의 도움을 받고 있습니다. 하지만 이 프로젝트는 모든 코드를 직접 짜 가며 페이지를 만들었고, 심지어 포스팅도 그렇게 했다는 점에서 기특하면서도 미련한(!) 방식이었습니다. 하지만 지금 역으로 생각해보면, 이 당시 쌩코딩으로 홈페이지를 구현하면서 느꼈던 한계점, 그리고 그 한계점으로 인해 각종 라이브러리가 등장한 것임을 이해한다면, 한 번 쯤 해볼 만한 경험이었던 것 같습니다. 무엇보다도 10~20여 년 전에는 홈페이지를 이런 식으로 직접 구축했었을 테니까요. 사뭇 그때가 대단하다고 느껴집니다. 지금은 정말 아무것도 아닌..
P.S. 이 페이지를 캡스톤 팀원에게 보여줬더니 잘 만들었답니다. 쌩코딩이라고 하니까 더더욱이요. 뭔가 아쉽긴 하네요.
P.S.2. 쌩코딩이 사실 모든 면에서 나쁜 건 아닙니다. 요즘 웹사이트는 다 라이브러리 갖다 쓰다 보니까 라이브러리 다운 받는 과정에서 데이터를 많이 써야 하고고 로딩 속도도 비교적 늦습니다. 하지만 이 사이트는 수십 KB로 돌아가기 때문에 정말 빨리 켜져요. 정말 가볍습니다. 느리다면 그건 Github 문제입니다.