웹개발 초보자가 만드는 홈페이지 개발기 #2

다른 부분들은 조금씩 건드려본 경험이 있는데, HTML을 이용한 개발은 처음이다. 예전에 학교다닐때는 홈페이지 개발 그러면 나모웹에디터 로 한다고 들었던거 같은데... 너무 옛날이야기겠지... 주로 C,C++,Java,파이썬 코딩을 하다가 HTML을 접하니 신기하고 모르는게 많다. 그렇다고 "아임웹" 이나 "윅스"를 사용해서 빠르게 구현하기 보다는 그래도 하나하나 배우면서 해보자는 성향이다 보니 어떻게 저떻게 삽질을 하고 있다.

Jekyll 의 정의나 소개는 구글에 많은 정보들이 있어서 생략하고 그 동안 해온 내가 해온 일에 대한 순서로 정리 해본다.

개발 환경 세팅

예전에는 필요한 프로그램이나 패키지들은 그냥 마구 설치를 했었는데 요즘은 그냥 설치하게 되면 랩탑 시스템의 호환성 이슈가 가끔 발생하는 경험을 해서 최대한 virtualenv 를 활용하거나 Docker를 이용하고 있다. Jekyll 설치를 위해 알아본 것도 docker 이미지가 있는가 했는데, 너무나 다행히 official image가 있었다. 그리고 테스트 동작도 잘 되어서 환경 세팅은 다행히 시간을 아꼈다.

jekyll docker

홈페이지 디자인 테마 선택

우선, 기획자분들과 디자이너분들께 무한한 존경을 담아 감사의 마음을 전하고 싶다.

그 동안 개발자로 일하면서 기획 회의나 디자인 회의를 참가하곤 했는데... 개발자로 회의에 참가하여 동료들의 결과물에 대한 개발 가능성에 대해 주로 의견제시를 해오다 보니 그들이 얼마나 고민하며 결과물을 만들어 냈을지에 대한 생각은 부족했었다. 이번 기회로 새삼 동료들의 소중함과 노고를 다시 느끼는 시간이었다.

홈페이지 첫대문은 어떻게 보이는 것일 좋을까?
어떻게 만들면 좀더 아름다울까?

jekyll theme 사이트를 통해서 Agency 테마로 정하고 파워포인트를 이용해서 디자인을 만들어보았지만 역시 부족하고 마음에 들지 않았다. @서지우 님의 디스콰이엇 글을 통해서 유용한 디자인툴을 알게 되어 조금씩 디자인 작업을 해보고 있다.

홈페이지 슬라이드 효과 주기

정적인 페이지에 글과 그림만 있으니 너무 밋밋하게 느껴져, 슬라이드 효과를 줄 수 있는 코드가 있는지 jekyll forum사이트와 github를 검색했다. 다행히 slider 오픈소스를 찾아서 적용했는데 다행히 삽질없이 한 큐에 효과가 작동했다.

jekyll slider effect, jekyll forum

남은일

아름답게 꾸미기
회사 소개 페이지 정도라 이 정도면 코드 작업은 어느정도 된 듯 하다.
적절한 이미지를 찾거나 디자인 하는 일이 남았다.
적절한 문구를 준비하는 일이 남았다.
호스팅
아직 개발중이다보니 막연히 깃허브페이지 사용해야지~ 했는데 최근에 @이상선 님께서 올리신 글들을 보며 호스팅 관련해서도 공부해보고 적절 한 곳을 이용해야겠다는 생각이 들었다.

그럼 이번 #1 로그는 여기서 마무리~

Disquiet Maker Challenge 6 그룹의 글