Review

블로그 개편기 2019 [1편]

우선 간단하게 나의 소개를 해보자면, 나는 코딩을 1도 모르는 디자이너로 개발에 관심만 많다. 그런 내가 잘하는거라고는 미친듯이 구글링하기와 눈치밥 그리고 FE개발자에게 끊임없이 도움을 요청하기로 여기까지 왔다. 이런 디자이너의 블로그 개편기를 천천히 풀어보고자 한다.

이 블로그는 2017년부터 지금까지 크게 총 6번에 걸쳐 개편을 진행하였다.

  • 포토샵으로 직접 디자인 후, 퍼블리싱 맡기기
  • 티스토리로 커스터마이징하기
  • Adobe의 Portfolio 사용하기
  • 무료 템플릿 사용하기
  • Wix와 크리에이터링크를 사용하기
  • jekyll을 통해 커스터마이징하기

포토샵으로 직접 디자인 후, 퍼블리싱 맡기기는 굉장한 도전이었다고 생각이 든다. 👏 모든 플랫폼에 맞추고 포트폴리오 프로젝트 별로 각기 다른 디자인을 하고 애니메이션까지 생각해서 퍼블리싱을 넘겨야지하는 원대한 포부를 담아서 커버 페이지를 디자인하고서는 열정이 불타사라져 버려서 그만두었다.

아니 근데, 페이지가 새로이 추가될 때마다 어떻게 올리지?

사실 가장 큰 문제는 내가 퍼블리싱된 블로그를 받아도 관리할 수가 없었다. 굉장히 큰 난관이었다. 계속해서 퍼블리셔를 괴롭혀야하나… (다행히 이런걸 크게 고민하기도 전에 열정이 사그러들어 다행이다.) 이런 사태를 겪고 나니 포트폴리오를 만들때의 큰 기준들이 생겼다.

  1. 반응형을 지원하는 플랫폼
  2. 내가 포스트를 올리기 쉬워야함
  3. 원하는대로 디자인을 커스터마이징 할 수 있어야함
  4. 도메인 변경이 가능해야함

그리하여 다음으로 정착한 곳 티스토리로 커스터마이징하기이다. 일반적인 유저도 편하게 이용할 수 있는 네이버와 티스토리 중 그나마 테마를 변경할 수 있는 부분이 매력적인 티스토리를 선택하여 개편을 시도하였다. 그러나! 이 테마를 수정하느니 그냥 있는대로 사용해야겠다 라는 생각이 점점 들었다. cafe24 마냥 정말 모래 속에서 사금찾기 같은 느낌으로 컬러값 하나를 바꾸고 싶어도 찾는데 굉장한 시간이 들었고 이 모든 걸 갈아엎는 건 내 스킬로는 한계다 싶어 현실과 타협하여 대강 완성은 하였다. 3. 원하는대로 디자인을 커스터마이징 할 수 있어야함 의 아쉬움이 컸고, 결국 Adobe의 Portfolio 사용하기로 넘어가게 된다.

Portfolio는 결론부터 말하자면 상당히 만족스러운 플랫폼으로 추천하고 싶다. Behance와 연결되어있어 포스팅을 하면 바로 Portfolio에도 불러와 보여줄 수 있었고, 심플이즈더베스트를 모티프로 한 딱히 손댈 필요가 없는 테마를 선택하여 바로 작업에 돌입하였다. Behance에 올리는 사진들은 상당히 용량이 컸기 때문에 내가 열심히 사이즈를 압축해도 로딩속도는 Behance나 Portfolio만큼 빠르게 나오지 않을거란 생각에

역시 직접 구현보다는 있는걸 활용하는게 좋은거 같아!

라고 생각하였다. 또한, SEO도 편하게 작업을 할 수 있는 점이 좋았다. 그러나, 이 모든 것은 Adobe를 구독하고 있는 사람에게만 주어지는 혜택(?)으로 이때쯤하여 나는 스케치로 갈아타면서 Adobe를 더 이상 구독하지 않게 되었고 자연스럽게 Portfolio도 사용할 수 없었다. 너무나 아쉽다.😭 그리하여 나는 다시 이곳저곳을 헤매이다 동생이 추천하는 무료 템플릿 사용하기를 추천받아 다시 개편에 돌입하였다.

TMI로 이 시기에 디자이너의 CSS 질문으로 괴롭힘을 당하던 FE개발자는 나에게 jekyll을 추천했지만 나는 큰 사진 위주의 포트폴리오를 만들고 있으니 나랑은 안맞는 거 같다라고 이야기했다. 그냥 나도 바로 jekyll 사용할 걸…

아 힘들다…왜 이렇게 마음에 드는게 없는거야

이쯤되니 사실 포트폴리오 하나 만들기가 굉장히 힘들다는 걸 느꼈다. 😞 무료 템플릿 사용하기HTML5UP 에서 테마를 다운받아 작업을 진행하였다. 이건 역대급으로 잘못된 선택이었다. 😫 포트폴리오 만들때 굳이 기준으로 넣지 않은 전제조건으로는 실제 웹사이트처럼 구동되어야 한다는 것이 빠진 테마였다.‍ 하지만 취업을 해야겠다는 의지와 시간이 촉박한 관계로 우선은 만들었다. 꾸밈은 전혀 없이 글과 사진만 보이면된다에 충실하게 시간 안에 맞추기 위해 욕심을 버렸다. 이후 취업에 갑자기 열정이 불타올라 Wix와 크리에이터링크 사용하기를 시도한다.

Wix와 크리에이터링크 그리고 사실 워드프레스도 시도해보았다. 워드프레스는 세부 테마를 수정할 수 있다는 말을 듣고 시도했으나, 전체 갈아엎기는 불가능하다 판단하여 Wix로 바로 방향을 바꾸었다. 그러던 와중 갑자기 Mobbin과 Pinterest의 한국형 버젼을 만들어야겠다는 생각에 사로잡혀 도전하였다. (갑자기 사이드프로젝트를 진행!) 사이드프로젝트의 목적은 일하면서 모아두었던 레퍼런스들을 폰에서 사진으로 보고싶지는 않아서 웹에 바로 보고 아이데이션을 하기 위함이었다. Wix에서 갑자기 왜 크리에이터링크로 갈아탔는지는 사실 기억이 잘 안난다. 😅 크리에이터링크는 깔끔하고 그나마 무난한 편이었다. 그러나 역시 사진 올리기에는 굉장히 불편했다. 사진관리에 어려움이 커서 결국 몇장 올리지 못하고 업로드를 중단한 상태이다. 해당 사이트는 Archiveberry 이다.

와 신난다!!!!!!!!!!!!!!!! 이거야 이거!!!

그리하여 결국 돌아돌아 jekyll을 통해 커스터마이징하기에 정착하게 되었다. 사실 처음 포트폴리오를 만들때는 디자인없이 머리 속으로 대충 그려진 드래프트를 막연하게 코드를 수정해서 만드는게 막막 했었다. 하지만 여러번의 시도 끝에 요령을 알았고, 집착으로 승부하여 내가 원하는 걸로 탈바꿈을 하였다. 또한 관리가 굉장히 편하다고 생각이 들고 있다. 아주 조금의 구글링과 눈치만 있다면 쉽지는 않지만 그럴싸하고 원하는대로 가장 비슷하게 구현이 되는 것 같다. 포스트의 글쓰기 방식은 다행히 Confluence와 Bear를 사용해본 경험이 있어 마크다운에는 큰 두려움이 없었고, 나에게 든든한 FE개발자가 있었기에 애니메이션까지 무사히 도움을 받아 넣을 수 있었다. (댓글과 GA까지 완벽해! 글을 좀 더 쓰고 SEO와 광고까지 노려본다)

사실 이 글은 jekyll 짱 좋아! 를 이야기 하고 싶었던 글이다. 처음 테마를 다운받아 구조를 이해하기까지는 며칠이 걸렸다. 모든 파일을 다 까보면서 이게 어디있는가를 찾기는 조금 걸렸지만 어느정도 익숙해져서 빠르게 수정을 할 수 있었고, 가장 큰 도움을 준건 크롬 확장 프로그램인 Pesticide 이다. 이걸 통해 빠르게 레이아웃을 확인하고 사라진 친구들을 찾기 쉬웠다. 이것만 가능하면 컬러값을 바꾸는건 나름 쉬운 일이었다.

사실 아직도 블로그는 수정 중에 있다. OG태그 수정, 네비게이션 수정, 카테고리 포스트 갯수 노출, 카테고리 정렬 수정, 페이지네이션 달기, 검색 붙이기, SEO는 어떻게 하는게 좋은지 등등 나름 할일이 많다(?). 이렇게 나의 블로그 개편기를 나열해보니 부끄럽다. 😇 결론은 역시나 포트폴리오는 완벽할 때 까지 keep going이고 (절대 완벽이란 없다!) jekyll을 처음부터 쓰면 좋았을걸 (지금이라도 변경해서 다행이다) 이라는 점이다. 2편에서는 조금 더 자세하게 포트폴리오 아이데이션과 테마의 As-Is와 To-Be를 비교하고 사용하였던 툴 그리고 코딩을 1도 모르는 디자이너가 어떻게 코드와 친해졌는지를 다뤄볼 예정이다.

감사합니다 :)

👉🏻 다른 포스트도 읽어보실래요? 더보기

본격 헷갈리는 마크다운 문법으로 글 작성해보기! CA CON-86 에어비앤비 디자인 시스템