[작업기] Sites.cv와의 콜라보 - Booklet 웹사이트 템플릿

Read.cv를 아시나요?

Read.cv는 다양한 분야의 디자이너부터 프로덕트 관련 직종의 유저들이 많은 커뮤니티다. 개인의 resume를 온라인상에서 만들고 공유할 수 있는 LinkedIn의 정제된 버전으로 시작했지만, 지금은 서비스를 확장해서, Post.cv (read.cv 유저들의 소셜 네트워크), Sites.cv (read.cv의 프로필을 바로 웹사이트로 바꿔주는 서비스)까지 3개의 플랫폼이 있다.

Read.cv에서 활동한 지는 1년 정도 된 것 같은데, 이 곳을 통해서 알게 된 사람도 많고, 확실히 커뮤니티가 작다보니 트위터나 인스타그램와는 다른 느낌으로 더 실속있는 네트워킹이 가능하다. 네트워킹이라는 단어를 쓰는게 미안할 정도로, 관련 업계 안에서 친구를 만들 수 있는 느낌이랄까. 실제로도 이 플랫폼을 통해서 알게 된 사람들을 올해 샌프란시스코에서 한 Config 때 실제로도 만나고 친해질 수 있었던, 나에게는 정말 고마운 플랫폼이다.

아직은 해외에서 훨씬 유명한 플랫폼이지만, 요즘 종종 한국 분들이 가입하시는 모습이 보이기도 하고, 최근에 Read.cv의 Founder와도 알게 되어서 협업 프로젝트를 한 김에 여기에 간단한 후기를 남겨본다. 

https://read.cv

Explore

 

---

 

Sites.cv - 레쥬메로 클릭 한 번에 웹사이트 만들기 

Read.cv에서 제공하는 레쥬메 페이지가 깔끔해서 실제로도 많은 디자이너들이 그 레쥬메 페이지를 홈페이지로 활용하거나, 레쥬메 대신에 그 링크를 공유하는 경우가 많이 보인다. Sites.cv는 그 레쥬메의 정보들을 가져와서 다양한 템플릿을 적용할 수 있게 해주고, 코드로 그 템플릿을 수정하거나 새롭게 만들어서 자신만의 웹사이트를 쉽게 만들 수 있게 해준다. 올해 6월 쯤 Beta를 시작했고, 계속해서 새로운 템플릿이 올라오고 있다. 

Founder인 Andy와는 이 플랫폼에 내가 작업을 종종 올릴 때마다 내 작업들을 뉴스레터나 웹사이트 메인에 여러 번 피쳐를 해줘서 인사를 하면서 알게 되었다. Sites.cv 론칭 직전에 연락이 와서, 내 프로필을 사이트 기본 템플릿 중 하나의 예시로 사용해도 되는지, 그리고 템플릿 하나 제작할 생각이 있는지를 물어봐서, 너무나도 기쁜 마음으로 둘 다 수락했다. 아래의 템플릿의 제목이 Seoul인 이유도, 커뮤니티 멤버들의 프로필을 예시로 쓰면서 그 멤버들이 있는 도시를 이름으로 지정하는 스윗함까지! 

https://read.cv/sites/templates/3jce9mqry

Seoul

 

---

 

Booklet - Bind your digital portfolio

그리고 요게 내가 제작한 템플릿, Booklet. 처음 잡았던 컨셉이 템플릿을 적용했을 때 개인에 따라 확 달라보였으면 좋겠다는 점이었다. 이미 만들어져있는 템플릿은 간편하지만 같은 템플릿을 쓰는 사람이 많으면 획일화 되는 느낌이 있다보니, 시각적으로 달라보이면 그런 단점을 보완할 수 있지 않을까라는 생각이었다. 그래서 프로필에 있는 프로젝트 이미지나 영상을 불러와서, 컬러를 추출하고, 그 컬러들의 조합으로 화면이 구성되는 방식으로 디자인을 했다. 

레이아웃을 잡다보니, 각 장의 색이 다른 책자 느낌이면 재미있겠다 싶어서 색이 겹쳐진 느낌으로 가고, 3d로 종이가 넘어가면 좋겠다, 해서 점점 아이디어가 확장되어갔다. 중간중간 Andy에게 피드백 용으로 공유를 했는데, Scroll 인터랙션을 넣으면 어떻겠냐는 제안에 한 번 시도해봤더니, 이전에 Hover 인터랙션일 때보다 훨씬 넘겨보기도 편안한, 재미있는 템플릿이 탄생했다. 개인적으로 너무나 뿌듯한 부분은 저 그림자 표현! 일반적인 그림자 효과가 아닌, 3d 공간 상에서의 그림자를 구현하려고 한참을 씨름하고, 특히 퍼포먼스 이슈를 잡아내느라 고생을 했다. 여전히 기기에 따라 조금 버벅거리긴 하지만, 저정도면 뭐! 

 

 

https://read.cv/sites/templates/u550vcops

Booklet

 

개인적으로는 데스크탑 버전도 좋지만, 모바일 버전일 때 그 책자를 넘기는 느낌이 너무나 잘 나타나서 뿌듯하다. Swipe 인터랙션까지 찰떡이랄까. 그렇다, 이 글은, 만들어놓고 내가 뿌듯해서 신나서 쓰는 글이다!

---

저 웹사이트의 일러스트레이터는, read.cv의 멤버로 작업이 너무 좋아서 내가 계속 팔로우해왔던 분인데, 이번 기회에 연락을 먼저 하고 이야기를 나눴다. 자신의 프로필을 써줘서 감사하다고 해서, 나야말로, 일러스트레이터나 아티스트의 웹사이트를 만드는 프로젝트를 한 번 해보고 싶었다고 말을 하니, 자신 한 명이 아닌 더 많은 사람이 템플릿을 쓰게 될테니 나는 한 명의 아티스트와 협업을 한게 아니라 더 많은 사람과 한거라는, 스윗한 말을 해줬다. 이 프로젝트가 뿌듯했던 이유는 작업 자체가 내 스스로도 마음에 들게 잘 나온 것도 있지만, 요 몇 년 쌓아온 온라인 상의 인연들에 더 감사하고, 더 활발하게 새로운 사람들과 작업하고 싶다는 생각이 들게 한, 여러 가지로 의미있었던 프로젝트이기 때문인 듯. 다들 Read.cv 한 번 방문해보시길!