[40일차] CX 디자인 및 Figma
CX (Customer Experience) 디자인
사용자 경험을 의미하는 UX (User Experience)는 많이 들어보고, CX는 조금 생소했다. 그래서 CX의 정의, UX와의 차이점을 알아보았다.
CX (Customer Experience) 란?
CX는 '고객 경험'으로, 최초 만남부터 시작된 전체 고객 여정에서 브랜드(기업)와의 상호작용을 토대로 축적된 브랜드에 대한 고객 인상으로 정의된다.
여기서 '고객 경험'은 경험과 관련한 고객의 느낌, 인상, 견해이다.
CX와 UX 뭐가 다를까?
UX는 단일 제품 또는 서비스에 초점을 맞추고, 이와 상호작용하는 사용자들이 편리한 경험을 하도록 하는 것이 핵심이다.
이렇게 보면 CX의 정의가 UX보다 조금 더 넓은 개념인 것을 알 수 있다.
CX는 브랜드(기업)에 대한 총체적인 고객 경험이고, UX는 특정 제품에 대한 사용자 경험이라고 정리할 수 있다.
UI/UX의 중요성
사용자는 쉽게 이해하고 편리하게 사용할 수 있는 제품을 선호하는 경향이 있다.
따라서 잘 설계된 UX는 사용자의 만족도를 높이고, 재방문율과 추천율을 증가시키는 긍정적인 결과를 가져온다.
이는 궁극적으로 브랜드 이미지 개선과 매출 증대로 이어진다.
최근 카카오톡의 개편을 예시를 들어볼 수 있다.
카카오톡은 지난 9월 대개편을 시행한 뒤 주가가 10%가 넘게 빠지고, 시가총액 3조 원 이상이 증발했다고 한다.
또한 사용자의 부정적인 의견으로 인해 개편 후 6일 만에 일부 기능을 원상 복구하겠다는 공식 입장을 밝혔다.
이렇듯 UI/UX는 단순히 사용자의 서비스 이용 편의뿐만 아니라, 사용자 충성도 및 브랜드 신뢰, 매출과 직결될 수 있다는 것을 알 수 있다.
그렇기에 UI/UX를 잘 설계하는 것은 중요하다.
프론트엔드 개발자들도 화면을 설계하는 작업을 하는 만큼, UI/UX에 대한 이해도가 필수라고 생각한다.
이러한 UI/UX 설계를 구체적으로 시각화하고 협업하기 위해 많이 사용되는 대표적인 도구가 Figma이다.
Figma란?
Figma는 웹 기반의 실시간 협업 디자인 도구로, 웹사이트나 앱 등 인터페이스 디자인, 프로토타입 제작 등에 사용된다.
오늘은 Figma의 핵심 기능 중 Style token(+ Github 연동), Constraint, Auto Layout에 대해 학습하였다.
Style Token
피그마의 플러그인 중 tokens studio를 사용해서 style token을 JSON 형태로 관리하고 불러올 수 있다.
예를 들어 색상, 폰트, 간격 등의 디자인 속성을 코드화해 Github에 저장해 두고, 피그마에 직접 Github 레포지토리와 연결해 직접 불러와 적용할 수 있다.
덕분에 디자인 시스템을 코드와 동일한 구조로 유지할 수 있고, 팀 단위 협업 시 일관성이 높아진다.
Constraints
Constraints는 요소가 부모 프레임의 크기가 바뀌었을 때 어떻게 반응할지를 설정하는 기능이다.
예를 들어 버튼이 항상 화면의 오른쪽 아래에 고정되도록 하거나, 창 크기에 따라 비율을 유지하도록 설정할 수 있다.
이 기능은 반응형 디자인과 밀접하게 연관되어 있으며, 다양한 화면 크기(PC, 태블릿, 모바일 등)에서도 UI가 자연스럽게 배치되도록 도와준다.
아래 예시를 보자.
Constraints 적용 전에는 프레임의 width를 넓히면, 우측에 검정 화면이 자리하는 것을 볼 수 있다.
Constraints 적용 후에는 width를 넓혀도 각 컴포넌트의 위치가 그대로 유지되는 것을 볼 수 있다.
Auto Layout
Auto Layout은 컴포넌트나 프레임 안의 요소를 자동으로 정렬하고 간격을 유지해 주는 기능이다.
버튼이나 카드처럼 크기가 유동적인 UI를 만들 때 매우 유용하며, 실제 반응형 레이아웃를 직관적으로 이해할 수 있다.
예를 들어 텍스트 길이에 따라 버튼의 폭이 자동으로 늘어나거나, 리스트 항목이 추가될 때 다른 컴포넌트들이 아래로 자연스럽게 밀리도록 설정할 수 있다.
특히 Flexbox나 CSS Grid 개념과 매우 유사하며, padding, alignment 같은 설정을 통해 실제 브라우저에서 반응형으로 동작하는 UI구조를 미리 시각화할 수 있다.
단축키
Auto Layout 설정 단축키 : Shift + A
Auto Layout 해제 단축키 : Shift + Alt + A
아래 예시를 보면 Auto Layout을 적용하기 전에는 레이아웃이 자동으로 정렬되지 않지만, 적용 후에는 레이아웃이 자동으로 정렬되는 것을 알 수 있다.
오늘은 전반적으로 UI/UX 디자인에 대해 배우고, Figma를 직접 사용해 보는 시간을 가졌다.
평소 프로젝트를 하면서 피그마로 디자인했었는데, 무작정 하나하나 설정하고, 위치시켜 가면서 작업했었다. 그렇게 해야 하는 줄 알았는데, 오늘 다양한 기능을 학습하고 적용하면서 이제까지 내가 피그마의 좋은 기능을 하나도 적용하지 못했다는 생각이 들었다.
이번 주동안 피그마 기능을 학습하고 여러 번 적용시켜 보면서 이번 미니 프로젝트 디자인할 때는 피그마 기능을 잘 활용해야겠다.