Blog는 여러 과정을 거쳐 드디어 Beta로 올려두었다. 여러 컨텐츠를 쌓아가며 디벨롭하려 한다. 드디어 다음 목표로 잡았던 Framer로 Portfolio Web site 만들기를 시작하였다. 아직까지 PDF Portfoilo가 일반적이지만, Web으로 만들려는데에는 여러 이유가 있었다.

Portfolio를 Web으로 만들려는 이유

주로 Designer라 함은 취업 및 이직을 위해 수많은 Portfolio File을 PDF로 만들어낸다. 자잘한 수정사항들이 있을 때마다 PDF로 뽑아야하고, 파일 용량을 가볍게 하기 위해 compress 과정까지 거쳐야 한다. 오탈자 1개를 고치기 위해 약 15분의 시간이 소요되는 것이다. 물론, 이 마저도 지원 이후 파악하게 되면 계속 찜찜한 마음으로 면접에 해당 포트폴리오를 들고 들어가야한다는 점이 몹시 싫었다.

Web으로 Portfoilo를 만들면, 변경 사항을 바로 모두에게 업데이트 시킬 수 있다는게 너무 간편하고 편리할거라고 생각했다. 실제로 이와 같은 이유로 Notion, Behance 등을 통해 포트폴리오를 만드는 디자이너가 많다.

그렇다면 왜 하필 Framer로 만들려 하는 것인지?

Behance는 너무나 오픈된 사이트라는 인상을 받았다. 누구나 접근 가능하고 누구나 읽을 수 있다. 접근성이 좋다는 점은 장점이라고만 생각했는데, 한번 크게 포트폴리오를 도용당한 적이 있어서 이후로는 공개 자체가 꺼려지게 되었다. Behance도 프로젝트를 비공개를 할 수 있지만, 아예 노출이 안되기 때문에 특정 사용자에게만 프로젝트를 오픈할 수 없다는 점이 아쉬웠다.

Notion은 다양한 외부 서비스로 직접 도메인을 만들 수도, 다양한 api를 연결해 댓글, 방문자 수 등을 볼 수 있는 여러 기능을 덧붙일 수 있다. 다채롭게 활용 가능한 점은 좋았으나 결론적으로 Notion 자체에 영향을 많이 받는다는 점, Contents 영역이 한정적인 점, 결국은 이미지로 업데이트를 해야한다는 점들이 수정이 쉽지는 않겠다고 판단하였다.

여러모로 learning curve가 확실하긴 하지만, 장기적으로 봤을 때 더 효율적이고 편리하다는 생각에 Framer로 작업하기로 결정하였다.

Framer로 Password 설정하기

정말 무엇보다 중요했다. Framer에서 이게 되지 않는다면 Framer에 portfolio를 만들 이유 자체가 없어진다. Blog와 유기적으로 오고갈 수 있어야하지만, Portfoilo를 볼 수 있는 사람은 내가 직접 관리할 수 있어야했다.

Site Settings > General에 들어가면 [Password Protection] 이 존재한다. 해당 기능부터는 유료 결제 후 사용 가능한데, 문제는 이게 페이지 단위가 아니라 도메인 단위의 Password 라는 것이다.

도메인 단위의 Password가 무슨 문제를 일으키는지 이해하기 위해선, 아래 Framer와 Figma와의 차이를 이해해야한다. Framer는 도메인 안에 Frame, Asset이 들어가있는 형태라 도메인을 나눈다는건 아예 Asset부터 두 벌로 관리해야한다는 의미인 것이다. 물론 Figma처럼 Design System File을 만들어 Component를 여기저기 도메인에서 쓸 수 있는지는 더 리서치를 해봐야할것 같다.

아니나 다를까 이로 인해 불편함을 느끼는 사용자는 꽤 많았다. 무려 득표수가 78표였다. 다들 포트폴리오의 일부 프로젝트를 막고 싶어하는 동일한 고민이 있는 것 같은데, Framer의 Canny를 확인해보니 당분간은 작업할 예정이 없는 듯 하였다.

결론…

현재까지 내가 생각할 수 있는 최선으로 Framer에 파일을 Blog, Portfolio 2개로 나누어 두었다. Blog만 오픈을 해두었으며 차차 Portfolio까지 작업이 완료되면 Blog의 Header에 Portfolio로 이동할 수 있는 페이지를 넣어두려한다.

한 2020년쯤 디자인 시스템이 컨퍼런스 주요 토픽이 되었을 때 부터 Framer 이야기가 많이 나왔었는데, 최근에 토스에서 이를 잘 활용해 엄청난 개선을 이뤘다는 이야기를 듣고 벼르고 있던 Framer 공부를 시작해야겠다고 생각했다.

모든 스터디가 그러하듯 목표가 명확해야 뭐라도 해낼 수 있으므로, Framer를 통해 달성할 목표는 아래 3가지로 정했다.

1. 내가 편하게 검열 없이 블로그를 올릴 수 있는 사이트

2. 취업할 때 매번 만들 필요 없는 나만의 포트폴리오 사이트

3. 취향에 따라 언제든 디자인을 바꿀 수 있을 것

이번 글에서는 첫 번째 편하게 블로그를 생성한 경험에 대해 적어보려 한다.

일단, Framer를 설치합시다.

처음에는 다짜고짜 Framer를 설치했다. 일러스트에서 Figma로 넘어갔던 경험이 수월해서인지, Framer도 별도 강의 없이 손쉽게 시작할 수 있을거라 자만했다. 일단 왼쪽이 레이아웃 패널, 오른쪽에 UI 수정이 가능한 패널이 있었고, 전반적인 구성이 Figma와 크게 다르지 않아 수월했다.

물론 디자인 툴이니 기본적인 웹사이트의 UI를 그리는 데에는 아무 문제가 없었지만, Framer는 반응형까지 고려하며 웹사이트를 만들어야 하다 보니 이 과정에서 자꾸 정렬이 맞지 않거나 레이아웃이 엄청나게 깨져버리는 일이 일어났다. Framer 사용 방법에 대한 튜토리얼을 편리하게 제공하고 있긴 했지만, 애초에 그런 걸 꼼꼼히 보는 성격도 아니고, 원하는 문제에 대한 해결책을 영상 튜토리얼로 찾아내기는 쉽지 않았다.

Figma를 통해 Framer로!

그 이후에는 방법을 바꿨다. 아무래도 아직 내가 가장 메인으로 편리하게 사용하는 툴이 Figma이다 보니, Figma에서 반응형으로 만든 작업물을 가져다가 Framer에서 실제 사이트를 확인하며 개선했다.

생각보다 스타일도 바로 바로 잘 넘어와줬고, 잘 만들어진 시안을 바탕으로 이상한 컴포넌트가 어떤 설정이 이상해서 문제가 발생하는 건지 정확히 알고 개선할 수 있었다. 이 과정에서 Framer의 레이아웃 시스템을 더 잘 이해할 수 있게 된 것 같다.

블로그를 만들 기 전에…

1차 목적은 블로그이다보니 브런치, 미디엄 등을 참고하면서 블로그 레이아웃을 잡던 중 여러 고민이 들었다.

올린 글을 홈페이지에서 어떻게 관리하지?

일반적으로 웹 앱 서비스상에서 콘텐츠는 서버에 저장하여 api를 통해 정보를 받아 프론트 처리된 화면상에 보여주는데, 나는 이걸 해낼 수 없다는 걸 깨달았다.

방문자 수 같은 독자 반응을 보고 싶은데 방법이 없나?

지금 이 실력으론 GA를 연동하기까지 꽤나 시간이 걸릴텐데…그 전 까지는 내가 아무리 열심히 글을 쓰더라도 독자의 반응을 아무것도 알 수 없다니 머리가 아찔해졌다.

공유하기, 댓글, 해시태그, 좋아요, 검색하기 등등 여럿 서브 기능들을 넣고 싶다.

여기서부터는 정말 Framer로 하려는 것이 나의 지나친 욕심인건가 라는 들었는데, Framer 홈페이지에서 계속해서 블로그를 만들기 편하다는 것을 어필하던 것이 떠올라 홈페이지 리서치를 좀 더 하던 도중 CMS를 발견했다.

센스있는 Framer의 CMS 기능

CMS란 컨텐츠를 홈페이지에서 빠르게 관리할 수 있도록 만들어 준 일종의 기본 plugin 이다. CMS 내에서 글을 작성했고 Framer의 기본 컴포넌트를 활용하면 글 내용이 홈페이지에 리스트, 상세페이지로 빠르게 연동된다. 이걸 바탕으로 다행히 글을 관리하기 훨씬 쉬워지고, 홈페이지, 상세페이지 두번 내용을 수정할 필요가 없어졌다.

심지어 상세페이지 자체가 일종의 디자인 시스템처럼 적용되어, 한 페이지에서 적용한 레이아웃이 모든 블로그 상세 페이지에 적용된다!

간단한 분석 기능까지

두번째, 독자 반응 확인하는 방법은 URL 이름을 수정하다가 발견하였다. [Site settings] > [Analytics] 를 통해서 최근 방문자수를 unquie, total count 와 top source 까지 볼 수 있도록 제공하고 있었다!

(근데 아무런 홍보도 안 했는데 대체 블로그 방문자는 어떻게 생겨나고 있는걸까…? Unique count의 기준이 궁금해진다.)

Next To Do

아직 3번째 고민에 대한 해결책을 찾지는 못했지만, SEO까지 보고나니 열심히 서치해보면 분명 방법이 있을 것 같다. 부가 기능을 통해 꼭 제공할 수 있길 바란다. 추가적으로, 컨텐츠가 아직 적은 상태라 Beta를 붙여두었다. 컨텐츠가 5개가 넘어가고, Resume라도 간단하게 사이트에 올려두었을 때, Beta를 제거하고자 한다. 부디 2022년 안에 마무리 되길 바란다.