나루터 개발 이야기

안녕하세요!

취미 레벨 정도의 코딩을 하는 로토리라고 합니다. 매번 커스텀시트 관련 코딩만 하다가 이번에는 홈페이지 템플릿을 제작 및 배포해보았습니다. 배포도 모두 끝났으니, 이 글에서는 개발과 관련된 사담을 적어보려고합니다. 편하게 서술하는 탓에 본문에서 약간의 기술적 용어가 사용되니 참고해주세요.

>>> 배포하고 있는 나루터 매뉴얼 페이지

어쩌다 나루터를 만들게 되었나?

개인 취미 작업들에 약간 여유가 생긴 상황에 마침 X에서 리트윗으로 나루라는 솔루션이 흘러들어왔습니다. 나루가 런칭되고 이틀이 되었던 날일까요..? 아무튼 하루 이틀 밖에 되지 않은 시점이었습니다. 둘러보니 정말 심플한 구조였더라구요.

뭐.. ? 호스팅절차를 완전히 건너뛰었어..? 아무리 1기가 할당이라도 이거 감당 되는건가… ?

라는 생각이 들 정도였습니다.

안그래도 주변 트친들한테 갠홈만들고 배너 달라고 구걸하러 다니던 판이었는데, 갠홈이 없는 지인들은 대부분 그 많은 절차가 어렵거나 귀찮은 사람들이었으니까요. 나루를 이용한다면 호스팅에 대한 개념을 이해하지 않아도 되고, DB 관리를 할 필요도 없어 간단한 갠홈을 만들고 싶어하는 사람들에게도 충분하다고 판단했습니다.

때문에 이 기회에 그 지인들이 아주 쉽고 간단하게 갠홈을 만들었으면 하는 바램으로 작업을 시작했습니다. 제 개인 나루를 만들기보다 이 작업을 먼저 해줘야, 지인들도 나루를 통해 홈을 만들 수 있으니까요. 특히, 사이트 주인의 배너를 쉽게 가져갈 수 있도록 배너 퍼가기 버튼을 꼭 구현하자는 생각은 처음부터 있었습니다.

그래야 제가 지인갠홈 배너도둑질을 하거든요 (진짜목적)

‘나루터’ 라는 이름에 관해.

나루 + -터(place)

나루로 처음 개인 홈페이지를 시작하는 사람들에게 기초가 될 수 있는 곳, 갠홈 구축의 항해를 시작하는 ‘터’가 되었으면 하는 마음으로 나루터라고 이름지어보았습니다. 지금은 흔하게 쓰이지 않는 단어겠지만 분명 여전히 실재하며, 의미적으로도 ‘나루’ 라는 서비스와 잘 어울릴 것 같아 선택했습니다.

‘나루지기’ 라는 단어도 발성이나 표기도 괜찮아서 고민했습니다만.. 사람을 지칭하는 단어보다는 장소를 지칭하는 단어가 템플릿에 더 어울리겠다 싶어서 나루터를 선택하게 되었습니다. 더욱이 나루지기라고 하면 나루를 이용하는 이용자들의 느낌이 들더라구요. 그래서 나루지기라는 키워드는 포기했습니다. 영문표기에 관해서는 Naru + -tor를 붙일 수 있었지만 우리의 글로벌 호카게의 이름과 겹치기 때문에 -er 을 붙였습니다.

개발 기간

기획/개발/디자인/배포.. 모두 해서 일주일이 채 안걸렸습니다. 6월 13일 목요일에 시작해서, 6월 19일 수요일에 정식 배포를 했네요. 중간에 주말이 껴있었는데, 주말 이틀 모두 약속이 있어서 놀러갔다오느라 (ㅋ) 사실상 주말 이틀을 제외하면 5일조차도 안걸린 셈입니다.

A4 한 쪽에 와이어를 그리고 메모를 적은게 기획의 전부네요. 항상 어떤 프로젝트를 착수하건 간에 손으로 스케치하지 않으면 시작하지 못하는 습관이 있어서 이번에도 이렇게 시작했습니다. 오로지 하나의 목적 : html을 이해하지 않아도 쉽게 쓸 수 있는 템플릿 만들기에 집착한 구조를 짰습니다. 사실 처음 스케치와 현재 개발된 구조에서 많이다른 부분도 있지만 그 부분은 코드를 쌓아나가면서 수정이 되더라구요. 협업 프로젝트가 아닌 1인 프로젝트이기에 이런 워크 플로우가 가능했던 것 같습니다.

대략적인 구상을 끝내고 깃허브 레포지토리를 만들어 개발 환경을 세팅하자마자 바로 날코딩을 했습니다. 깃 워크플로우도 제대로 다듬어지지 않아서 브랜치 이름도 멋대로 지었다가 중간에 바꾸고 그랬던 것 같네요. 1.0 출시 시점에는 main 브랜치의 커밋들이 최대한 깔끔했으면 좋겠어서 이래저래 스쿼시 커밋을 해봤는데 이게 최선이었던 것 같습니다. 깃 다루는 요령은 점점 나아지리라 믿으며..

개발 환경

- 개발 도구 : 깃허브 & vscode + github codespace

- 디자인 도구 : 그림판(ㅋㅋㅋㅋㅋ) & aseprite

그 많고 많은 툴 중에 왜 하필 그림판이냐고요? 회사에서 몰래 했으니깐..^^ㅋ

샘플의 디자인 테마

갠홈이라는게 … 사실 그 시절 갠홈세대들은 이미 오랜 향수를 갖고 있기 마련이니, 그 세대들의 노스탤지어 감성을 자극할만한 디자인으로 가보고 싶었습니다. 물론 제 개인 취향도 역시 html5 이전 시절의 감성이기 때문에 안 귀찮고 복잡도를 올리지 않는 선에서 정말 브레이크 없이 풀악셀을 밟아봤습니다만 과연 어떻게 와닿았을지 모르겠네요. 다들 마음에 드셨으면 좋겠습니다..!

기본 샘플테마인 갈매기들 테마는 사실 별 생각 없이 정했습니다. 나루터라는 물가에는 물고기가 있으니 당연스레 갈매기가 있을터이니 마스코트 삼아보았습니다. 처음엔 모든 이미지 요소를 도트로 찍어서 사용하려했으나.. 집과 회사를 번갈아가며 개발을 하다보니 그림이 필요할 때 급하게 그림판으로 대충 그려서 갖다 쓰게되었습니다. 집에서 다시 수정을 할까 싶었지만 그런대로 테마랑 잘 어울리는 듯 하여 내버려두었습니다. 도트 갈매기들의 나루터를 잘 부탁드려요 ^^s2

만들면서의 고민이 있었나?

당연히. 개 큰 고민. YES.

가장 큰 고민은 나루에서 서버사이드 언어 파일/자체 호스팅 DB를 쓸 수 없다는 것이었습니다. 애초에 서버사이드 언어를 잘 다루는건 아니지만 이렇게 되면 사용자가 관리자페이지와 같이 프론트에서 뭔갈 수정하고 그럴 수 없기 때문에 다른 방법을 모색해보았습니다.

그래서 선택한 것이 css var() 입니다.

어드민 GUI 설계가 불가능했기 때문에 최소한의 수정으로 여러항목들이 연동되어 수정할 수 있게하는 방법의 가장 가까운 대안이었습니다. 자신의 나루소스를 업로드하는 관리자 본인만 직접 파일을 수정하는 방법이었으니까요. 이젠 저한테도 없으면 안되는 기술이었던 var()를 통해 최상단에 root 선언과 함께 사용자 설정 항목을 모두 배치하고 아래쪽 세부 스타일에서는 위에서 지정한 var 스타일을 가져와 관계적 스타일링이 되도록 구성했습니다.

또 아쉬웠던 것은 역시 아니나 다를까 CRUD 관련 기능인데요, 사실 애초에 DB가 지원되었다면 굳이 나루터가 필요하지 않았을 거라고 생각합니다. 아보카도라던가 그누보드라던가.. 이미 DB연동 홈페이지 플랫폼은 많았으니까요. 하지만 제가 파악한 ‘나루’에서는 Back 단의 영역을 만질 수 없으므로 호스팅DB가 아예 없다는 전제로 가정하고 작업하게 되었습니다.

이렇게 큰 고민들은 사실상 기획 단계에서 발생되고 해결책이 마무리 된 내용들입니다. 전 계획이 되지 않으면 착수하지 않으니 개발 첫날 충분히 고민을 하고 본격적인 작업에 들어갔습니다.

만족스러웠던 부분

- 뷰스타일, 네비게이션 스타일을 분리한 것.

그 당시 개인 홈페이지들은 포털사이트가 존재했음에도 이미 개인화 된 상태였기 때문에 레이아웃이 정말 다양했던 것으로 기억했는데, 이러한 개인화 디자인을 손 쉽게 도와줄 수 있는 방법을 고안하며 구현한 점이 스스로 마음에 드는 부분입니다.

- https 보안서버 지원으로 clipboard api 사용.

나루는 보안서버를 지원합니다. 그런 덕에 배너 복사 기능에서 필요한 클립보드 api를 사용할 수 있었습니다. 보안서버 미지원 환경에서는 코드가 정말 길어졌을텐데 덕분에 코드도 쉽고 간결해지고.. 개인 프로젝트에서 이 api를 꼭 써보고 싶었는데 마침 그런 환경이 갖춰져서 즐겁게 구현했습니다.

- 샘플 페이지의 트래픽 분산.

나루는 사용자당 1기가만을 할당하는 아주 작은 호스팅 플랫폼입니다. 그렇기에 개개인에게 할당 된 트래픽 용량도 넉넉치 않을 것 같았기에 샘플로 연결되는 메인 게이트 페이지는 나루의 도메인을 받을 것이므로 우선 나루를 이용하되, 연결되는 샘플페이지는 역시 개인 호스팅으로 돌려서 트래픽을 분산해야겠다! 라는 생각을 했습니다. 그리고 더 나아가..

어차피 소스는 깃허브로 배포할거 아닌가? …… 깃허브에 페이지 기능이 있잖아?

라는 생각이 들자마자 바로 프로젝트에 페이지와 docs 세팅을 마쳤습니다. 휴우 하마터면 트래픽 비용 낼뻔했다 ^^)7

아쉬웠던 부분

- 크로스 브라우징

사실.. 크로스 브라우징을 제대로 하지 않았습니다. 배포를 최대한 빨리 하고싶어서 신중함이 부족했다는 뜻이지만 사실 크롬기반이기 때문에 웬만하면 무난하게 잘 쓸 수 있지 않을까 싶네요. 언젠가는 종류별로 기기를 가지고 싶군요 남에게 부탁하지 않고도 크로스 브라우징 디버깅을 할 수 있는 환경…! 너무 갖고싶다…!

- 깃허브 액션

깃허브의 기능들을 제가 100% 활용하지 못하는데다가 데브옵스의 역할은 해낼 수 없는 정~~~~~~~말 기초적인 수준의 프론트 코더이기 때문에 액션을 활용한 릴리즈 자동화 배포를 못해낸 것이 너무 아쉬운 부분입니다. 구조나 기획 등등에서의 아쉬움보다도 정말 이 부분에서의 아쉬움이 너무 크네요. 혼자서 chatGPT와 대화를 하며 yml 파일을 작성해보았지만 역시 아직은 뭐가 뭔지 모르겠습니다 (ㅋㅋㅋ ㅠ) 언젠간 제가 할 수 있겠죠..? 깃허브 액션을 통해 특정 디렉토리만 릴리즈 하실 수 있는 분을 모십니다…

더 하고 싶은것

구시대 이모티콘 관련 js 라이브러리를 구상중입니다. 언젠가 소개할 수 있으면 좋겠네요. 설치형 갠홈들에도 쓸 수 있는 그시절 웹박수 툴도 다시 한 번 만들어보고 싶어요. 이런저런 .. 구상들이 결국 그시절 갠홈 콘텐츠에 촛점이 맞춰져있는게 새삼 웃기네요 (쑻)

전하는 말

오로지 ‘재밌겠다, 지금이다!’ 라는 생각만으로 작업하다보니 단기간에 빠르게 배포까지 이어질 수 있었다고 생각합니다. 아무래도 다른 솔루션이나 라이브러리 등등에 비하면 정말 기초지식만으로 구성한 초라한 코드들이지만 기획부터 배포까지 전반적인 작업을 단기간에 진행한 일종의 1인 스프린트 작업이라고 볼 수 있었기에 저에게도 의미가 있는 프로젝트라고 생각합니다. 깃도 엉망진창 커밋을 찍으며 미숙한 부분이 많아서 교육적으로 모범적인 레포지토리는 아니겠지만 모쪼록 잘 부탁드립니다.

덧붙여 너무나도 좋은 플랫폼을 만들어주신 나루의 개발자 여러분들에게도 감사의 말씀을 전합니다. 덕분에 즐거운 작업을 할 수 있는 계기가 되었습니다. 응원하겠습니다!!

나루터가 갠홈을 추억하는 여러분들에게 조금이나마 도움이 되기를 바랍니다.