페르소나에 사용할 사용자의 사진이 필요하다면 – UI Faces

요새는 이전보다 상당히 많은 사용자가 생겨난 Sketch의 플러그인 중 하나인 UI Faces를 소개합니다. 사이트 이름 그대로 UI에 사용하기 위한 Faces를 쉽게 사용할 수 있도록 도와주는 플러그인입니다.

uifaces

https://uifaces.co/

사이트 소개

사이트 구축을 하다 보면 사용자 정보를 추가시켜야 할 경우가 있습니다. 이때 사용자의 얼굴 정보가 필요해지는데 보통은 일러스트로 대체하거나 구글 등에서 대충 복사해서 사용하곤 합니다. 작업을 하다 보면 기획 초기에 정의된 인물에 대해 복기가 필요할 때도 있기에 가능한 실제 인물 사진을 사용하는 것이 좋습니다. 하지만, 이런 작업을 일일이 매번 작업하는 것은 불필요한 시간이 될 수도 있습니다. 그럴 때 이 플러그인이 도움을 드릴 수 있을 것 같습니다.

현재 Photoshop에서는 지원하지 않는 기능으로 MAC용 프로그램인 Sketch에서만 사용 가능하다는 것이 아쉽긴 합니다.

아래는 UI Faces의 첫 화면입니다.

uifaces main page

UI Faces의 필터 메뉴입니다. Source 영역을 보면 해당 이미지들을 어디서 불러들이고 있는지 확인할 수 있습니다. 배우와 뮤지션등의 필터링도 가능합니다.

uifaces filter menu

필요한 메뉴를 선택 후 Apply Filters를 선택하여 적용하면 됩니다. 예를 들어 나이를 20~30대, 성별을 남자로, 머리카락 색을 검정, 표정을 웃는 얼굴로 지정하여 필터링해본 결과입니다.

uifaces filter sample

서비스에 따라선 대략적으로나마 연령층과 성별 등을 구분 지어야 할 경우, 요긴하게 사용될 것으로 보입니다.

일부 공개된 정보를 바탕으로 인종 구분까지도 가능할 것 같지만 제한적일 수밖에 없는 만큼 아직은 인종의 구분까지는 욕심일 것으로 보이네요. 하지만, 현재 상태만으로도 페르소나나 사용자 정보를 사용해야 하는 페이지에 요긴하게 사용될 것 같습니다.

uifaces personal select sample

해당 요소를 클릭하면 이름과 불러드리고 있는 소스 위치도 파악할 수 있습니다.

uifaces personal name sample

너무 가공된 이름은 은연중에 사용자에게 집중하지 못하게 하는 경향이 있는 만큼 페르소나 등 가상의 사용자를 생성하는 데 있어 실존하는 인물과 가까운 이름이 필요합니다. Names 메뉴를 통해 필요한 이름을 복사하시면 될 것 같습니다만 아쉽게도 영어 이외의 언어는 지원하고 있지 않은 것 같습니다.

uifaces sketch plugin demo

Plugin 페이지에서는 실제 사용 예를 gif 애니메이션으로 보여주고 있습니다.

uifaces sketch plugin download

페이지 하단에 있는 다운로드 버튼을 사용하여 플러그인을 사용하시면 됩니다

uifaces submit avatar

Submit Avatar를 통해 본인의 아바타도 제공할 수 있습니다!

(Visited 172 times, 1 visits today)

sapjil

서울거주의 회사원으로 DESIGN/HTML/CSS를 생업으로 하고 있는 마크업 엔지니어 입니다. 프론트엔드 엔지니어로 거듭나고자 틈틈이 JavaScript를 공부하고 있습니다. 이 블로그 SAPJIL에서는 웹 사이트 제작에 필요한, 삽질을 줄일 수 있는 정보를 공유합니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다