다행히 제가 재직중인 회사는 야근이 거의 없어서 매일 업무시간을 마치고 회사에 혼자 남아 인스타그램 클론 코딩을 시작했습니다. 앞서 말한대로 예신이 인스타그램만 쓰고 있어서요.

프로포즈만을 위한 인스타그램을 만들고, 거기다가 우리의 이야기들을 피드 순으로 올려서 보여주면 좋겠다고 생각했습니다. 다만 인스타의 계정을 새로 파는건 고려하지 않았는데요. 중간에 광고 나오는 것도 싫고.... 프로필을 누르면 피드와 다른 사진들도 보여주고 싶기도 했고, 여러 가지 이유가 있어서 직접 만드는 쪽으로 했습니다.

최초 목표는 아래와 같았습니다.

html/CSS 기반의 클론 코딩 강좌들은 유투브에 많이 있어서 따라서 만드는 것 자체는 어렵지 않았습니다. (왜 이렇게 되는지는 둘째치고) 우선 이해 못하더라도 시키는대로 다 따라서 하는거니까요. 진짜 애매하게 어려웠던 부분들은 대부분의 클론 코딩이 '유사하게' 만드는 거지, '똑같이' 만드는건 아니더라구요.

예를 들어 인스타그램의 웹 버전에선 검색창의 위치가 반응형 사이즈에 따라 로고에서부터의 위치가 미묘하게 바뀌며, 특정 사이즈 이하에선 사라지더라구요. (935px, 735px, 600px이 기준점이었던 듯)

검색창을 클릭했을 때 아이콘이 사라지는 등 효과가 있고, 우측의 아이콘들은 svg로 되어 있는데 아이콘 간의 간격까지 고려하여 불러오게 되어 있었습니다.

이런 디테일한 부분들까지 다 똑같이 만들고 싶었는데, 이런 부분들이 한번에 해결된 레퍼런스가 없더라구요.

우측의 빨간색 영역은 웹에서만 노출되는 영역인데 마찬가지로 화면 가로 사이즈에 따라 노출/비노출이 바뀌는데 이런 부분들이 제대로 반영된 레퍼런스가 없었습니다.

결과론적으로 여러 클론 코딩 내용들을 짜집기하여 충돌나는 CSS를 다 손보고, 정리하는데 약 3주 정도 걸렸습니다. 중간중간 모르는 CSS 들은 검색도 해가고, 작게 다른 화면들 만들어서 테스트해가느라 시간이 많이 걸렸네요. CSS를 전혀 모르던 저라 이 과정에서 많은 좌충우돌의 이야기들과 삽질의 스토리가 있지만 지루하니깐 패스.

이제 콘텐츠만 채워넣으면 되는 상황에서 많은 고민이 생겼습니다.

그래서 바로 개발을 해보기로 했습니다. (점심 메뉴는 결정 못하면서 이상한대서만 실행력 좋음)

예전부터 파이썬을 좀 배워보고 싶었기에 자연스럽게 파이썬+Django 조합이 결정되었구요.

우리들의 보물창고 유투브엔 파이썬으로 인스타그램 만들기 강좌가 엄청 많은데요.

초반엔 외국의 강좌들을 주로 봤는데, 최종적으로는 mychew_님 강좌가 많은 도움이 되었고 사실 대부분의 개발은 여길 참고했습니다.

무슨 말인지 이해도 못하면서 우선 시키는대로 다 따라하고, 지우고 처음부터 다시 만들기를 한 10번쯤 했던 것 같아요. 10번쯤 하니깐 뭔가 미묘하게 이해가 되는 부분들이 있더라구요. 역시 모든 건 삽질하면서 몸으로 배워야 알게 되는 나....

따라하면서 제가 가장 많이 한 말은 '어?'였습니다.

신비롭더군요. -_-;;;

html은 table, tr, td라도 알았지 파이썬은 진짜... 뭔 말인지도 모르고 계속 따라하면서 배웠습니다. 특히나 Static 의 개념은 아직도 왜 굳이 이렇게까지 하는건지 잘 모르겠고, 다른 모든 부분들도 어렵고 구질구질했지만 역시나 저에게만 새롭지 남들에겐 재미없는 이야기니 패스하구요.

결론은 어떻게든 만들어냈다. 나에게 박수.

간단한 회원 체계를 만들어서 첫 입장 시 닉네임을 받은 다음

브라우저를 종료하기 전까진 댓글란에 댓글 입력 시 해당 닉네임이 자동으로 저장되어 불편함을 줄이고 싶었는데, 결과론적으로 실패했습니다. 피드 번호와 끝까지 안 맞더라구요... ㅠㅠ

GA를 기본적인 부분만 알고 있지 전문적으로 써보지 못해서 이번에 해볼려고 했는데 역시 시간 관계상 실패했습니다. 모든 액션이나 링크마다 이벤트 설정하고, UTM도 해보고, 태그매니저로 태그 관리도 하고... 다 해보고 싶었는데 아쉽지만 다음 기회로...

기타 기획자로서 느낀 점을 좀 말해보자면

재미없는 이야기는 여기까지. 담편은 좀 재밌게 써야할텐데...