더불어민주당 전국대학생위원회 홈페이지 개발

https://theminjoouniv.github.io

더불어민주당 전국대학생위원회

 

1. 시작

 

처음 시작은 공개할 수 없는 모종의 이유로 기초적인 수준의 landing page 개발이 필요해졌습니다. OPA(one page application)이면 될 것 같아서 여러가지 방법 중에 가장 가벼운 github.io를 통해 static page(정적 페이지)로 만들기로 결정했습니다.

 

비슷한 사례가 무엇있을까 살펴보던 중 올해 KAIST 학부 총학생회 선거운동본부였던 새로(https://saerousc.github.io/) 케이스가 적절해 보였습니다. 그러나 그대로 활용하기는 어려울 것 같아 고쳐볼까 하다 소스를 보니 활용한 템플릿이 evelyn이란 이름의 landing page template이였습니다.(https://onepagelove.com/evelyn) 예쁘긴 한데 메뉴바가 전혀 없어 향후 확장성에 제한이 있을 것 같았습니다. 그래서 해당 사이트에서 다른 템플릿으로 찾아보기로 결정!

 

 

2. 시행착오    

 

일단 해당 페이지에서 써먹을만한 후보군을 뽑아봤습니다.

 

1) Carta (https://onepagelove.com/carta)

Carta - Free One Page Template Download and Review

첫 화면이 매력적이라 딱 꽂혔습니다. 앞에서 evelyn은 메뉴바가 없어서 포기했지만 carta는 없는데도 1푼의 고민도 없었습니다. 근데 문제는 다른 곳에 있었으니... 첫 화면 구성에서 중요한 두 가지 요소는 중간의 명조 계열의 큰 워딩과 깔끔한 로고라 느껴졌습니다. 명조계열이야 괜찮은 한글 폰트를 활용하겠다 싶어 괜찮았지만 저 carta 로고를 대체할만한 한글 폰트가 없었습니다. 저런 분위기를 못 만들고 완전히 새로 만들바에야 안쓰는게 낫겠다 싶어 포기하게 되었습니다.

 

 

2) Paradigm Shift (https://onepagelove.com/paradigm-shift)

Paradigm Shift - Free One Page Template Download and Review

이 템플릿도 첫 화면에서 꽂히긴 했는데 막상 써먹으려니, 저렇게까지 크게 강조할만한 사진이 없다는 것과, 의류 브랜드에나 적절할 듯한 느낌을 강하게 받았습니다. 그래서 딱히 손대보진 않고 바로 탈락시켰습니다.

 

 

3) Meal (https://onepagelove.com/meal)

Meal - Free One Page Template Download and Review

이 친구는 첫 화면보다는 기능적인 요소들이 좋았습니다. 일단 메뉴가 있다는 사실이 장기적으로 쓸만하겠단 생각이었고 간단한 슬라이더와 전환형 테이블이 있어서 당장은 필요없어도 이후 컨텐츠 추가 시 유리하겠다 싶었습니다. 물론 한번 손보다가 던지고 다른 템플릿들을 살펴봤었는데 아무리 봐도 이 친구만한 녀석은 없더라구요.ㅜㅜ 결론적으로 이 녀석으로 결정!

 

 

3. 개발과 폰트 Tip

 

그 이후엔 특별할 게 없었습니다. 만들고 고치고 만들고 고치고 만들고 고치고... 반복... 사실 다른 것보다도 정당 페이지다보니 저작권 문제가 민감할 수 있었습니다. 특히 폰트 저작권이 걸려 있으니 선택지가 좁아서 몹시 난감했습니다. 그 과정에서 되게 좋은 사이트를 하나 발견했는데요! 바로 눈누(https://noonnu.cc/)입니다.

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

 

눈누

눈누는 상업용 무료 폰트를 소개해주는 사이트입니다. 개발이나 디자인하다보면 폰트땜에 골치 썩는 분들이 많이 계실텐데 직접 문구를 쳐서 어떻게 출력되는지 보면서 고를 수 있어서 정말 좋습니다. 아 게다가! 프론트엔드 개발자시면 필요한 웹폰트 작업이 필요없습니다.

 

눈누는 자기 사이트에 올려놓은 모든 폰트들에 대해 CDN을 가지고 있습니다. 그래서 각 폰트를 들어가보시면 하단에 @font-face 구문이 있고, 그대로 복사해서 쓰면 쉽게 쓸 수 있습니다. 이런 대박 사이트가 있다니... 꼭 기억해야하겠습니다.

 

 

4. 후기

 

한동안 프로그래밍과 디자인 툴에 손떼고 있어서 오랜만에 재밌는 작업을 했다 생각이 듭니다. 이번 작업에서 남는 생각이 있다면 dynamic이 아닌 static으로 게시판 등의 기능을 구현할 방법은 없을까하는 거네요. OPA야 severless로 만들 때가 많아서 일이 편하긴 하지만 한국 정서가 OPA에 긍정적인가에 대해서는 여전히 부정적이고 저 또한 한국에서 쭉 살아갈 예정이라 좀 다른 대안이 있으면 좋겠다 싶은 생각이 계속 드네요.

 

그게 아니면 Tistory 블로그를 뜯어고치는 건데 사실 그 작업도 어느정도 제한이 있으니... Tistory 운영 측에서 css/js 작동을 보다 포괄적으로 열어주셔도 감사하지 않을까싶은 마음으로 작업을 끝냈습니다.