핀터레스트 말고, 레퍼런스 어디에서 찾아요?

프로덕트 디자이너, UI/UX 디자이너, 기획자, 개발자... 등 우리는 우리의 일을 하고 있지만, AI가 등장함으로써 우리 직업의 경계는 모호해지고 있습니다. 특히 '디자인'은 이제 프롬포트 몇 줄만 입력하거나 무료 소스로 풀리는 템플릿을 활용하여 손쉽게 디자인 영역에 발을 담가 볼 수 있게 됩니다.

 

그런데 말입니다

우리가 스스로 이러한 디자인을 만들어야 할 때,

우리는 제일 먼저 무엇을 할까요?

@바^로%바$로

 

레퍼런스

입니다

 

레퍼런스를 찾는 디자이너

 

디자인을 조금이라도 하다 보면, 명수 아저씨처럼 스크롤과 저장을 무한반복 하다가

1) 개쩌는 디자인

2) 내가 이걸 벤치마킹 할 수 있을까

3) 너무 방대한 양

 

주로 이러한 이유로 인해 결국은 계속 핀터레스트만 돌고 돌게 되는 것이죠

레퍼런스를 많이 多 찾는 것도 중요하지만, 

디자인 콘셉트에 맞는 레퍼런스를 찾는 것도 중요합니다

제가 대학생부터 지금까지 진행하면서 디자인 콘셉트를 정할 때, 그리고 디자이너에게 원하는 디자이너를 설명하는 시간을 가질 때 레퍼런스를 찾았던 사이트를

지금 바로 공개합니다!

 

오늘의 목표...

 

레퍼런스 탐방 = 지옥 틀을 깨부수자

 

 

양이 많아서 2편으로 이어질 수도 있음;

(스압 주의)

 

---

이미지를 클릭 시 해당 사이트로 이동 가능합니다

유아이볼

app/web 레퍼런스

출처_드리블 메인 홈페이지 캡처

 

이 사이트를 소개하고 싶어서 첫 번째 UI 게시글을 레퍼런스 추천 게시글로 했다고 해도 과언이 아닐 만큼, 핀터레스트만 쓰던 저에게 유아이볼은 약간 혁신? 같은 사이트였습니다 다양한 앱, 웹 디자인이 있고, 필터를 걸어서 보고 싶은 것만 볼 수 있습니다

 

제가 유아이볼을 사용하면서 가장 느낀 큰 장점은,

총 4가지인데요

 

1. UI 패턴별로 조회 가능 + 산업
2. 앱/웹 다양한 종류 조회
3. 피그마 플러그인으로 스크린샷 내보내기 가능
4. 무료 계정으로도 충분한 서치 가능
5. 커뮤니티로 사용자 의견또한 조사 가능

 

 

또 하나 가장 중요한 점은, 레퍼런스의 일부분을 피그마 플러그인으로 이미지화시켜 불러올 수 있다는 것인데요,

역시 UX/UI 레퍼런스 사이트답게 상세 페이지에 내보내기 과업이 쉽게 되어 있습니다

 

출처: (좌) 유아이볼 플러그인 / (우) mentimeter 일부 내보내기 결과

 

혹시 모르니, 상단 이미지를 클릭 시 유아이볼 플러그인 설치 페이지로 이동할 수 있습니다

사실 유아이볼은 제가 2년 전부터? 알게 된 사이트인데, 기업 자체에도 흥미가 생겨서 인스타그램도 팔로우하면서 종종 인사이트를 찾아보곤 합니다 ㅎㅎ 나중에는 더욱 성장해서, 해외 디자인까지 섭렵했으면 좋겠습니다

개인적으로 응원함...

 

 

---

 

드리블 (Dribble)

web

출처_드리블 메인 홈페이지 캡처

 

두 번째는 드리블입니다 레퍼런스 찾기에도 좋지만, 기업 입장에서는 Get Hired 카테고리를 통해서 디자이너를 주머니에 쏙 넣을 수 있겠더라고요 약간 비헨스 같은 거랄까? 전 세계 디자이너들이 작업물을 올려서 해외 취업을 노리시거나 견문을 넓히기에 정말 좋은 사이트입니다. 이외에도

 

1. 타이포 레퍼런스가 개별적으로 구분되어 있다
2. 세계적인 디자인과, 상세를 자세히 볼 수 있다
3. 비슷한 디자인&산업군을 파도타기로 조회할 수 있다
4. 수준 높은 디자인을 레퍼런스로 가져올 수 있다

 

이렇게 잠점이 많은 사이트입니다

비헨스랑 비슷한 홈페이지라고 생각하시면 편하실 거예요

---

카고 (Cargo)

web/art

출처_카고 메인/커뮤니티/템플릿 캡처

Cargo 열기

 

유아이볼과 드리블은 '디자이너'를 위한 레퍼런스 사이트라고 봐도 무방한데요, 하지만 카고는 상업적인 디자인이라기보다, 예술을 하는 '아티스트'를 위한 영감님(ㅋㅋ) 웹 페이지라고 생각합니다

그럼에도 불구하고 제가 여러분들께 추천을 드리는 이유는

1.  레이아웃 구도를 공부하고, 레퍼런스로 삼을 수 있다
2. 웹페이지 내 구도, 요소의 배치 방법에 대한 시각을 넓힐 수 있다
3.  색상(특히 원색)의 쓰임을 이해할 수 있다
4. 타이포그래피에 대한 영감을 얻을 수 있다

 

이처럼 여러 방면에서 디자인을 시작하기 전에 필요한 영감, 레퍼런스를 제공하기 때문입니다

특히나 졸작을 준비하시는 (미대생) 대학생 분들이나, 색다른 디자인을 도전하고 싶으신 분들께

강추하는 사이트

이기도 합니다

 

아래의 링크를 클릭하셔도 카고 사이트에 방문하실 수 있습니다

 

Cargo

 

---

Readymag

web

 

출처_Readymag 메인 화면 캡처

 

Readymag은 웹사이트 레퍼런스를 찾을 때 최적화되어 있는 사이트예요

위 사진에서 나타나는 것처럼 랜딩 페이지, 회사, 쇼핑몰, 포트폴리오 사이트 등

다양한 웹사이트 디자인과 다양한 동적 구현을 참고하고 싶을 때 들어가 보면 좋아요

 

1. 템플릿을 구매할 수 있다 (달러지만)
2. 디자인뿐만 아니라 js로 동적인 구현에 대한 레퍼런스또한 될 수 있다
3. 해외 웹사이트가 모여 있고, 창의적인 웹사이트가 정말 많다

 

 

Readymag 상세 화면 캡처

 

 

해당 사이트는 사실 레퍼런스 사이트라기보다는, 웹사이트를 만들어 주는 아웃소싱 회사라고 볼 수 있는데 자신들이 만든 웹사이트를 전시해 놓음으로써 저희가 웹사이트를 구현하고 디자인함에 있어 레퍼런스를 구해 볼 수 있겠다 싶어서 제 게시글의 콘텐츠로 가져오게 되었습니다. 조금만 둘러보면 js를 정말 잘 다뤄서, 만약 개발자라고 하시면 스크롤링 스토리텔링을 벤치마킹할 수도 있겠습니다.

 

 ⭐스크롤링 스토리텔링?

웹사이트를 사용자가 스크롤할 때 이야기가 전개되는 스크롤링(Scrolling)과 스토리텔링(Storytelling)을 결합한 기법으로써, 웹사이트를 방문한 유저에게 몰입감을 줄 수 있습니다

---

 

소개해 드리고 싶은 사이트가 너무 많은데,

오늘은 여기까지 해야겠어요

 

애간장 태우기 전법

 

여러분들에게 도움이 됐길 바랍니다!

 

사실 핀터레스트가 자료를 업데이트하고, 사용자 경험 기반으로 추천하는 기능이 너무 뛰어나서, 이곳에서 영감을 얻는 게 편하시다면 굳이 다른 레퍼런스 사이트를 뒤지고 다녀야 하나? 하는 생각이 있습니다만....

세상의 트렌드가 빠르게 변화하면서 프로덕트 디자인에게 발전을 요구하는 수준이 빠르고 발전하기 때문에, 여러 사이트를 수집해 놓고 레퍼런스 수집이 필요할 때마다 채굴하는 것이 작업의 퀄리티를 높이는 것에 도움이 된다고 생각합니다

 

저는 곧 레퍼런스 사이트 추천 2편으로 찾아뵐게요