UI, UX: 누가 무엇을 하나요? 기술 산업에 대한 디자이너 가이드

플러스: Apple, Facebook, Google 및 기타 기술 분야의 거물들이 디자인 작업을 설명하는 방법.

디자인은 다소 광범위하고 모호한 용어입니다. 누군가 내가 디자이너라고 말할 때 그들이 실제로 매일 하는 일을 즉시 명확하게 알 수 없습니다. 포괄적 인 용어 디자이너가 포괄하는 여러 가지 책임이 있습니다.



디자인 관련 역할은 산업 디자인(자동차, 가구)에서 인쇄(잡지, 기타 출판물), 기술(웹사이트, 모바일 앱)에 이르기까지 다양한 영역에 존재합니다. 비교적 최근에 화면용 인터페이스를 만드는 데 중점을 둔 기술 회사가 유입되면서 많은 새로운 디자인 역할이 등장했습니다. UX나 UI디자이너라는 직함은 초심자에게는 혼란스럽고, 다른 업계에서 온 디자이너에게도 낯설다.

주어진 설계 문제에는 정답이 없습니다.

기술 산업의 맥락에서 이러한 각 제목이 실제로 의미하는 바를 추출해 보겠습니다.



UX 디자이너(사용자 경험 디자이너)

UX 디자이너는 주로 제품의 느낌 . 주어진 설계 문제에는 정답이 없습니다. UX 디자이너는 특정 사용자 문제를 해결하기 위해 다양한 접근 방식을 탐색합니다. UX 디자이너의 광범위한 책임은 제품이 한 단계에서 다음 단계로 논리적으로 흐르도록 하는 것입니다. UX 디자이너가 이를 수행할 수 있는 한 가지 방법은 사용자의 행동을 관찰하기 위해 직접 사용자 테스트를 수행하는 것입니다. 언어적 및 비언어적 걸림돌을 식별하여 개선하고 반복하여 최고의 사용자 경험을 만듭니다. 예제 프로젝트는 새 사용자를 위한 유쾌한 온보딩 흐름을 만드는 것입니다.



상호 작용 모델, 사용자 작업 흐름 및 UI 사양을 정의합니다. 시나리오, 종단 간 경험, 상호 작용 모델 및 화면 디자인을 이해 관계자에게 전달합니다. 트위터의 비주얼 아이덴티티를 기능에 통합하려면 크리에이티브 디렉터 및 비주얼 디자이너와 협력하십시오. 필요에 따라 설계 와이어프레임, 모형 및 사양을 개발하고 유지 관리합니다.

- Twitter의 Experience Designer 직무 설명

UX 디자이너가 만든 앱 화면의 예.크레딧: Dribbble의 Neway Lau가 작성한 Kitchenware Pro Wireframe Kit.

ea 가장 많이 다운된 댓글 reddit



결과물 : 화면의 와이어프레임, 스토리보드, 사이트맵

무역의 도구 : 포토샵, 스케치, 일러스트레이터, 불꽃놀이, 인비전

당신은 그들이 야생에서 이렇게 말하는 것을 들을 수 있습니다.
: 회원가입이 완료되면 '감사합니다' 페이지를 보여주어야 합니다.

UI 디자이너(사용자 인터페이스 디자이너)

제품의 전체적인 느낌을 중요시하는 UX 디자이너와 달리 사용자 인터페이스 디자이너는 제품 배치 방법 . 사용자가 상호작용하는 각 화면이나 페이지를 디자인하고 UI가 UX 디자이너가 배치한 경로를 시각적으로 전달할 수 있도록 하는 역할을 합니다. 예를 들어, 분석 대시보드를 만드는 UI 디자이너는 가장 중요한 콘텐츠를 맨 위에 프론트 로드하거나 슬라이더 또는 컨트롤 노브가 그래프를 조정하는 데 가장 직관적인지 여부를 결정할 수 있습니다. UI 디자이너는 일반적으로 일관된 스타일 가이드를 만들고 제품 전체에 일관된 디자인 언어가 적용되도록 할 책임이 있습니다. 시각적 요소의 일관성을 유지하고 오류 또는 경고 상태를 표시하는 방법과 같은 동작을 정의하는 것은 UI 디자이너의 권한입니다.



Airbnb.com의 시각적 언어를 개념화하고 구현합니다. 사이트 전체 스타일 가이드를 만들고 발전시킵니다.

- Airbnb에서 UI 디자이너 작업 설명

UI 디자이너와 UX 디자이너 사이의 경계는 상당히 흐릿하며 기업이 이러한 역할을 결합하는 것은 드문 일이 아닙니다.

UI 디자이너는 앱의 전체 레이아웃과 모양과 느낌을 정의합니다.크레딧: Dribbble의 Ionut Zamfir가 작성한 Metro Style Interface 4.

무역의 도구 : 포토샵, 스케치, 일러스트레이터, 불꽃놀이

당신은 그들이 야생에서 이렇게 말하는 것을 들을 수 있습니다. : 로그인 및 회원가입 링크가 우측 상단으로 이동되어야 합니다.

비주얼 디자이너(그래픽 디자이너)

시각 디자이너는 다른 사람들이 간과하는 작은 세부 사항에 땀을 흘립니다.

비주얼 디자이너는 픽셀을 푸시 . 디자이너가 아닌 사람에게 디자이너가 무엇을 하는지 묻는다면 아마도 이것이 가장 먼저 떠오를 것입니다. 시각 디자이너는 화면이 서로 연결되는 방식이나 누군가가 제품과 상호 작용하는 방식에 관심이 없습니다. 대신 아름다운 아이콘, 컨트롤 및 시각적 요소를 만들고 적절한 타이포그래피를 사용하는 데 중점을 둡니다. 비주얼 디자이너는 다른 사람들이 간과하고 Photoshop에서 4배에서 8배까지 확대/축소 수준에서 자주 작업하는 작은 세부 사항에 땀을 흘립니다.

다양한 해상도(아이콘, 그래픽 및 마케팅 자료)로 데스크탑, 웹 및 모바일 장치용 디자인을 포함하여 개념에서 실행까지 고품질의 시각적 디자인을 생성합니다. 브랜드를 반영하고 언어를 적용하며 제품에 아름다움과 생명을 불어넣는 자산을 만들고 반복합니다.

- Google의 Visual Designer 직무 설명

민주 토론 2019 라이브 스트림 YouTube

또한 UI 디자이너가 이중 작업을 수행하고 최종 픽셀 완벽한 자산을 만드는 것은 상당히 일반적입니다. 일부 회사는 별도의 비주얼 디자이너 역할을 하지 않기로 선택합니다.

비주얼 디자이너는 가이드를 배치하고 모든 단일 픽셀을 조정하여 최종 결과가 완벽하도록 합니다.크레딧: Dribbble의 Seevi kargwal이 작성한 iOS 7 Guide Freebie PSD.

무역의 도구 : 포토샵, 스케치

당신은 그들이 야생에서 이렇게 말하는 것을 들을 수 있습니다. : 커닝이 꺼져 있고 버튼이 왼쪽으로 1픽셀 떨어져 있어야 합니다!

인터랙션 디자이너(모션 디자이너)

iPhone의 Mail 앱에서 당겨서 새로 고칠 때 미묘한 튀는 애니메이션을 기억하십니까? 모션 디자이너의 작업입니다. 일반적으로 정적 자산을 다루는 시각 디자이너와 달리 모션 디자이너는 앱 내에서 애니메이션을 만듭니다. 그들은 처리 사용자가 인터페이스를 터치한 후 인터페이스가 수행하는 작업 . 예를 들어 메뉴가 어떻게 들어가야 하는지, 어떤 전환 효과를 사용할지, 버튼이 어떻게 펼쳐져야 하는지를 결정합니다. 잘 수행되면 모션은 제품 사용 방법에 대한 시각적 단서를 제공하여 인터페이스의 필수적인 부분이 됩니다.

그래픽 디자인, 모션 그래픽, 디지털 아트, 타이포그래피와 색상에 대한 감수성, 재료/질감에 대한 일반적인 인식, 애니메이션에 대한 실용적인 이해. iOS, OS X, Photoshop 및 Illustrator에 대한 지식과 Director(또는 이에 상응하는 항목), Quartz Composer(또는 이에 상응하는 항목), 3D 컴퓨터 모델링, 모션 그래픽에 대한 지식이 필요합니다.

- Apple의 Interaction Designer 직무 설명

무역의 도구 : AfterEffects, Core Composer, Flash, Origami

당신은 그들이 야생에서 이렇게 말하는 것을 들을 수 있습니다. : 메뉴는 800ms 후에 왼쪽에서 천천히 들어옵니다.

뉴욕 볼 드롭 라이브

UX 연구원(사용자 연구원)

UX 연구원은 사용자 요구의 챔피언입니다.

UX 연구원은 사용자 요구의 챔피언입니다. 연구원의 목표는 사용자가 누구입니까?라는 두 가지 질문에 답하는 것입니다. 사용자는 무엇을 원하는가? 일반적으로 이 역할에는 사용자 인터뷰, 시장 데이터 조사 및 결과 수집이 포함됩니다. 디자인은 끊임없는 반복의 과정입니다. 연구원은 A/B 테스트를 수행하여 사용자 요구를 가장 잘 충족시키는 디자인 옵션을 찾아냄으로써 이 프로세스를 지원할 수 있습니다. UX 연구원은 일반적으로 대규모 데이터에 대한 액세스가 통계적으로 중요한 결론을 도출할 수 있는 충분한 기회를 제공하는 대기업의 주축입니다.

제품 팀과 긴밀하게 협력하여 연구 주제를 식별합니다. 사용자 행동과 태도를 모두 다루는 디자인 연구. 설문조사와 같은 다양한 정성적 방법과 정량적 방법의 하위 집합을 사용하여 연구를 수행합니다.

- Facebook의 UX 연구원 직무 설명

UX 디자이너는 때때로 UX 연구원의 역할도 수행합니다.

결과물 : 사용자 페르소나, A/B 테스트 결과, 사용자 조사 및 인터뷰

무역의 도구 : 마이크, 종이, 문서

당신은 그들이 야생에서 이렇게 말하는 것을 들을 수 있습니다. : 우리 연구에 따르면 일반적인 사용자는…

프론트엔드 개발자(UI 개발자)

프론트엔드 개발자는 제품 인터페이스의 기능적 구현을 ​​만드는 책임이 있습니다. 일반적으로 UI 디자이너는 프론트엔드 개발자에게 정적 모형을 전달한 다음 이를 작동하는 대화형 경험으로 변환합니다. 프론트엔드 개발자는 또한 모션 디자이너가 제시하는 시각적 상호 작용을 코딩할 책임이 있습니다.

무역의 도구 : CSS, HTML, 자바스크립트

당신은 그들이 야생에서 이렇게 말하는 것을 들을 수 있습니다. : 960px 12열 그리드 시스템을 사용하고 있습니다.

보여 : 종종 프론트 엔드 개발자는 동료, 클라이언트 또는 오픈 소스 세계와 작업을 공유해야 합니다. 이를 위한 많은 도구가 있지만 가장 간단한 방법은 공유 호스팅을 얻고 거기에 HTML 파일을 던지는 것입니다. 여기에서 찾을 수 있습니다 상위 10개 웹 호스팅 리뷰 . 유용한 정보가 많이 있습니다. 주의 인모션 호스팅 리뷰 , 게다가 a2 호스팅 리뷰 .

제품 디자이너

제품 디자이너는 일반적으로 제품의 모양과 느낌을 만드는 데 관여하는 디자이너를 설명하는 데 사용되는 포괄적인 용어입니다.

제품 디자이너의 역할은 잘 정의되어 있지 않으며 회사마다 다릅니다. 제품 디자이너는 최소한의 프론트 엔드 코딩을 수행하고, 사용자 연구를 수행하고, 인터페이스를 디자인하거나, 시각적 자산을 만들 수 있습니다. 제품 디자이너는 처음부터 끝까지 초기 문제를 식별하고 이를 해결하기 위한 벤치마크를 설정한 다음 다양한 솔루션을 설계, 테스트 및 반복합니다. 다양한 디자인 역할 내에서 보다 유연한 협업을 원하는 일부 회사는 전체 디자인 팀이 사용자 경험, 사용자 연구 및 시각적 디자인 요소를 집합적으로 소유하도록 장려하기 위해 이 제목을 선택합니다.

일부 회사에서는 UX 디자이너 또는 단순히 디자이너를 포괄적인 용어로 사용합니다. 직무 설명을 읽는 것은 회사의 디자인 팀이 책임을 어떻게 분담하는지 파악하는 가장 좋은 방법입니다.

2020년 환급에 대한 국세청 업데이트

디자인의 모든 측면(상호작용, 시각, 제품, 프로토타이핑)을 소유하십시오. 웹과 모바일에서 새로운 기능을 위한 완벽한 픽셀 모형과 코드를 만듭니다.

- Pinterest의 제품 디자이너 직무 설명

디자이너를 구합니다

이것은 내가 신생 기업에서 가장 흔히 듣는 단계입니다. 그들이 일반적으로 찾고 있는 것은 위에서 설명한 모든 것을 할 수 있는 사람입니다. 그들은 예쁜 아이콘을 만들고, A/B 테스트를 거친 랜딩 사이트를 만들고, 화면에 UI 요소를 논리적으로 배열하고, 프론트 엔드 개발도 할 수 있는 사람을 원합니다. 이 역할의 범위가 광범위하기 때문에 일반적으로 소규모 회사에서 요구 사항을 구체적으로 설명하기보다는 디자이너를 고용하도록 요청하는 소리를 듣습니다.

이러한 다양한 디자인 역할 간의 경계는 매우 유동적입니다. 일부 UX 디자이너는 인터랙션 디자인도 해야 하며 종종 UI 디자이너도 픽셀을 푸시해야 합니다. 적합한 사람을 찾는 가장 좋은 방법은 디자이너가 회사 프로세스 내에서 수행할 것으로 기대하는 작업을 설명하고 해당 사람의 주요 작업을 가장 잘 나타내는 직함을 선택하는 것입니다.

이 기사의 버전이 원래 나타났습니다. 여기 . 허가를 받아 재출간되었습니다.