개발자와 UI/UX

Vincent·2023년 3월 19일
0

UX/UI 정의

어느 플랫폼에서 누가 어떻게 사용할 것인가를 고민하는 일

UX(User Experience) : 사용자 경험 (문제 해결과 사용 여정)
UI(User Interface) : 사용자 상호 작용 (모양과 기능)
- 디지털 기기(어느 플랫폼에서?), 사용자(누가?), 상호 작용(어떻게 사용할 것인가?)과 관련

현업에서의 UI/UX

  • 회사 규모에 따라 역할이 달라짐
  • 사용자 : 기획자 PM_ex) 삼성전자
  • 상호 작용 : 디자이너
  • 디지털 기기 : 개발자 IT회사_ex) 네이버, 카카오

개발자 관점의 현업

기획자 -> 디자이너 -> 개발자
- 플랫폼 스펙에 없는 기능들 요구
- 결과물에 대한 책임은 개발자, 가만히 있으면 피해를 입음

스펙에 없는 기능 예시

1. 플랫폼에 없는 컴포넌트(IOS에는 있으나 안드로이드에는 없는 기능)
2. 해상도 변화를 고려하지 않은 디자인(늘어나지 않는 이미지와 늘어나는 기준에 대한 가이드)
3. 구현할 수 없는 인터렉션(애니메이션)
4. 예외처리 되지 않은 기능들("이 상황에는 어떤 화면을 표시해야 하죠?")
5. 폰트의 line height(웹 환경과 디자인 툴의 표시 차이)

현업 관점에서 유능한 개발자

- 요구 사항에 대한 [가능/불가능/예외 사항 판단 능력]
- 이를 정확하게 납득시킬 수 있는 ***설득력***(가장 중요)
- 그 기능을 요구하게 된 기획자, 디자이너의 의도 파악
- 최대한 요구와 일정에 맞출 수 있는 개발 실력
* 생각보다 (훨씬) 설득이 잘 안 된다...

설득이 잘 안 되는 이유

- 설명할 수준으로 알고 있기 어려움
- 개발자에 대한 인식(수동적인 태도 "그건 안 돼요" -> 그냥 하기 싫어서 안 된다고 말하고 있다는 인상을 주면 안 됨)
- *** 지속적인 협업을 통해 나에 대한 신뢰 확보 ***

UI 이해의 중요성

- 각 영역에 대한 이해가 높을수록 일을 하기 수월함
- 한 가지 전문적인 영역 +@ 가 높은 연봉을 만든다

백엔드 개발자에게 UI/UX?

- 백엔드 개발자도 UI/UX 이해가 필요한가요?
- 만들고 있는 기능이 어디에 쓰일 것인지 알고 있어야 함.(API 설계 및 예외 처리 등)
- 개발자 실력 측정은 동료의 평가로부터 나온다.

UI/UX 개발 특징

좋은 UX란

- 기존 불편함을 개선(카카오뱅크)
- 새로운 경험(넷플릭스)
- 서비스의 목적/의도는 무엇인가요?
- 사용자에게 어떤 느낌을 주고 있나요?

UX의 어려움

- 정답이 없는 분야/예측하기 힘든 분야
- 결과(데이터)를 바탕으로 설계
- 사용자 행동 분석 필요 -> 툴 이용
- 학습의 분야 -> 여러 사례들을 분석한 책들을 학습하자

UI/UX 개발 특징

- 뮤직 플레이어 서비스를 개발한다고 가정
- UI/UX 설계를 담당하게 되었다 가정
* 익숙한 UI/UX도 직접 설계하려면 기억하기 어려움

UI/UX 학습 방법

- 서비스의 UI/UX를 의식하며 사용
- 기존 서비스들의 UI/UX를 분석 -> 평소 관심이 가장 중요
- 디자인 영감 얻기(Behance, Dribble, Pinterest)
- 폰트 크기/간격, 여백/색상의 조합을 규칙화해 보기

Front-End 개발자의 매력

- 프로젝트, 서비스의 첫 이미지는 화면에서 결정
- 서비스의 평가는 Client 품질에서 결정
- 큰 이슈는 Back-End에서 나온다.
- 개발 실력 == 결과물 또는 동료들의 평가

UX 사례

- 요구사항 : 음악에 따라 배경 사항을 바꾸고 싶어요.
* 어떤 색상을 선택하지? 미리 정한 랜덤 색상 or 앨범 색상 느낌? 
-> 앨범 색상은 어떻게 얻지? 이미지에서 평균 값 색상 추출? 라이브러리가 있나?

개발자의 선택 : 그 기능이 정말 중요한가? 개발 비용은? 개발자의 애정이 있는가?

- 개발 예외 케이스 발생 : 너무 밝거나 어두운 경우
* 기능을 취소하고 롤백/해결 방안 고민 -> 어둡거나 밝을 때 분기를 이용할 수 있을까? 
-> 색상 대비(color contrast)를 참고해 보자.
- 중요하지만 기획/디자인 단계에서 예상하지 못한 UX
* 다른 곳에서는 어떻게 하고 있나?(음원 사이트 참조) 어떻게 구현해야 할까?
profile
Frontend & Artificial Intelligence

0개의 댓글