UX UI 포트폴리오 사이트 - UX UI poteupollio saiteu

안녕하세요, 오늘은 UXUI 디자이너들을 위한 디자인 사이트 추천을 해보려고 합니다.
목적에 따라 참고하는 사이트가 다를 것 같아서, 디자인/이론 두 가지로 나누어서 글을 써보려고 합니다.
1편은 디자인 작업을 할 때, 2편은 디자인 공부를 할 때 보기 좋은 사이트로 참고하시면 되겠습니다 :)
그러므로 이번 1편은 디자인, 즉 실무에서 디자인 작업을 진행할 때 참고하기 좋은 사이트들에 대해 추천해보려고합니다.

1) 무료로 세련된 목업 찾기

디자인을 잘 끝내도 포트폴리오에 넣으려면 세련된 퀄리티의 목업이 필요합니다.

디바이스에만 넣어서 목업을 표현할 수 있지만, 다양한 상황 연출이 가능한 목업 소스들이

필요할 때도 있어요. 그럴 때 서치하기 좋은 사이트입니다.

Unsplash

https://unsplash.com/

Unsplash는 디자이너분들이라면 다 아실 사이트인데요. ‘phone’ 혹은 ‘app’ 등의 단어를 검색하면

목업으로 적용할 수 있는 다양한 이미지들이 나옵니다. 다운로드한 이미지에

폰 부분만 잘라내서 클리핑마스크 기능을 이용해 디자인한 화면을 붙이면, 목업이 완성됩니다.

💡 단, 너무 과투시 혹은 화려한 목업보다는 UI에 집중이 될 수 있는 정면 목업을 적용하시는 걸 추천드립니다.

Free Mockup

https://www.free-mockup.com/downloads/category/ux-ui-mockups/

사실 UIUX 목업은 너무 연출된 목업보단 디바이스의 형태만 사실적으로 적용한 간단한 목업이 더 효과적입니다.

Free Mockup 사이트에는 다양한 목업들이 포토샵 파일로 다운받을 수 있는데요,

심플하면서 퀄리티 좋은 목업들을 여러 디바이스별로 서치하고 싶을 때 제격인 사이트입니다.

2) 타사의 와이어프레임을 참고하고 싶을 때

디자이너들은 UX적인 관점에서 예측한 행동을 이끌어낼 수 있는 디자인을 도출하려고 노력합니다.

해당 목적을 달성하기 위해서는 정확하고 많은 데이터 그리고, 수많은 테스트들을 겪어야 하는데요.

데이터가 부족하거나 테스트를 일일히 해보기에는 여건이 안 되는 상황인 경우도 있습니다.

그럴 때는 타사의 UX 디자인을 유심히 보면 답을 얻을 수도 있습니다.

UX 디자인의 프로세스 중 와이어프레임 단계에서 참고할만한 사이트 들을 추천해드립니다.

wwit

https://wwit.design/

한국의 어플리케이션 UI 화면이 모아져 있는 사이트입니다. 보통, 대기업, 유니콘 혹은 최근 주목을 받고 있는

스타트업들이 등록되어 있는 것으로 보입니다. 다만, 최신 업데이트 버전의 UI가 아닐 수도 있으니

타사의 디자인을 자세하게 살펴보고 싶으시다면 직접 깔아보는 것을 추천드립니다.

mobbin

https://mobbin.design/browse/ios/screens

외국 어플리케이션 UI 화면을 볼 수 있는 사이트입니다. 훨씬 다양하고 세부적으로 검색이 가능합니다.

다만 모든 언어가 영문이고, 영어권 사람들을 타겟으로 제작된 UI이기 때문에,

한국 앱보다는 세부적으로 참고하기 어려운 점이 있습니다.

3) 아이콘 리소스를 찾고 싶을 때

아이콘을 직접 제작하는 것도 UI 작업 중 하나입니다. 직접 제작하기 전 다양한 아이콘 레퍼런스를 참고하거나

리소스로 사용할 수도 있는데요. 무료 아이콘 다운로드 사이트들을 소개해보겠습니다.

Flacticon

https://www.flaticon.com/

외국 사이트로 정말 많은 리소스들이 등록되어 있는 사이트입니다. PNG 파일로 다운받으면 무료이니,

한 번 참고해보기 좋은 사이트인 것 같아요.

Noun

https://thenounproject.com/

noun project 또한 여러가지 아이콘들을 탐색할 수 있는 사이트입니다. 다만 아이콘 파일을 다운받으려면

회원가입을 진행해야하는 번거로움이 있긴 합니다. 하지만 SVG, PNG 파일 모두 다운 가능하다는 점이 메리트입니다.

icons8

https://icons8.com/

아이콘 외에도 일러스트레이션, 그래픽 등 다양한 리소스가 필요할 때 다방면으로 검색할 수 있는 사이트입니다.

다양한 그래픽 리소스들을 한 사이트에서 찾아 다운받을 수 있다는 편리함이 있습니다.

4) 컬러에 관한 사이트

디자인시스템을 구축할 때 일관된 컬러시스템을 구축하는 것도 굉장히 중요한 작업인데요.

컬러 시스템을 작업할 때 도움이 될만한 사이트들도 가져와봤습니다.

Colour Contrast Checker

https://colourcontrast.cc/ffffff/ff6408

메인 백그라운드 컬러와 메인 포그라운드 컬러의 대비가 어느정도인지 측정해주는 사이트입니다.

보통 대비값이 4가 넘는 컬러 조합으로 메인 시스템을 설정하는 것이 바람직합니다.

Material Color System

구글의 Material Color System은 정말 UXUI 디자인의 교과서 같은 자료입니다. 학습 및 레퍼런스로도

좋은 사이트이지만, 이렇게 사이트 내에 있는 컬러 팔레트를 이용하여 메인 컬러들의 컬러 팔레트를 생성할 수 있습니다.

저도 디자인 컬러 시스템을 제작할 때 이 사이트의 기능을 이용해서 컬러 팔레트를 제작합니다.

작업을 하다보면 많은 자료와 레퍼런스들이 큰 귀감이 됩니다. 찾다보면 제가 추천한 위의 사이트 외에도

유용한 사이트들을 발견하실 수 있을실 거예요. 

개인적으로 유용해서 자주 들어가는 사이트들만 추려보았는데, 아시는 사이트들도 있겠지만

모르시는 사이트들도 꿀팁으로 얻어가셨으면 좋겠네요.

그럼 다음 주에 사이트 추천 2편으로 만나뵙겠습니다 :)