outputs

[작업기] 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

Read.cv is a show, don't tell professional platform to form beautiful profiles and make meaningful connections with people and teams.

read.cv

 


 

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

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

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

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

 

Seoul

Try Seoul, a beautiful website template by Andy Chung on Read.cv

read.cv

 


 

Booklet - Bind your digital portfolio

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

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

 

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

 

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

 

Booklet

Try Booklet, a beautiful website template by Seungmee Lee on Read.cv

read.cv

 

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

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.


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

 

728x90