[모달편] 작지만 큰 변화, 모달 UX 문구 다듬기
UX/UI 디자인 이슈 및 해결 과정
배경
회사에서 위탁운영으로 삼성 임직원을 위한 피트니스 홈페이지를 제작하고 있습니다. 이 홈페이지는 회원용과 어드민용으로 나누어 두 가지의 서로 다른 사용성을 고려한 구조로 기획과 디자인 작업을 진행 중입니다.
개발자와 협업하는 과정에서 UI 컴포넌트, 특히 모달 컴포넌트와 관련된 개발 이슈가 발생했습니다.
급박하게 프로젝트가 시작되었고, 복잡한 기능 구조 속에서 디자이너가 혼자 작업하고 있는 상황이기 때문에 프로젝트 초기에 발생할 수 있는 문제라고 생각됩니다..!
문제
1. 모달의 패딩과 크기의 일관성 부족
이 문제로 모달 창의 역할은 크게 두 가지로 나눠졌습니다.
정보 전달만을 목적으로 하는 모달
사용자의 액션을 유도하는 목적의 모달
모달이 하나의 기능에만 한정되지 않고, 유동적으로 달라지는 글자 수와
콘텐츠 길이로 인해 일관된 크기와 패딩 유지에 어려움이 있었습니다.
이로 인해, 가장 큰 문제가 된 부분은 모달안에서의 컴포넌트의 패딩 값이었고, 결과적으로 디자인 일관성이 떨어져 불필요한 개발 리소스가 계속 발생한다는 문제가 있었습니다.
(계속 컨포넌트를 만들어야한다는,,,)
2. 모달 문구의 정보 전달력 부족
모달 문구의 정보 전달력 부족 모달에 사용된 일부 문구가 지나치게 축약되어 있거나 반대로 너무 상세하여 핵심적인 메시지가 사용자에게 명확히 전달되지 않는다는 내부 피드백이 있었고, 오히려 정보의 의도를 정확히 이해하지 못하고 혼란을 겪을 수 있다고 생각되었습니다.
해결방안
1. 패딩과 크기의 일관성 확보
UI 디자인 시스템 내에서 모달 컴포넌트의 규격을 명확하게 정의했습니다. (최소-최대 너비와 높이, 내부 패딩)
피그마에서 컴포넌트와 오토 레이아웃을 활용하여 모달 창이 콘텐츠 양에 따라 유연하게 대응할 수 있도록 구조를 재정립했습니다.
액션 버튼과 텍스트 간 간격 및 버튼 위치를 명확한 픽셀 규격으로 정의하여 일관성을 유지했습니다.
2.문구의 명료성과 정보 전달력 향상
UX 라이팅 가이드를 작성하여 문구의 길이와 표현 방식을 표준화했습니다.
사용자가 한눈에 명확히 이해할 수 있도록 핵심 정보 중심으로 간결하게 재작성했습니다.
중요한 키워드를 볼드체로 명확히 구분하여 사용자의 시선을 유도했습니다.
적용 과정결과
해결 방안을 통해 UI 컴포넌트의 일관성을 확보하고 사용자 경험과 개발팀과 협업 리소스도 향상시킬 수 있었습니다. 특히, 이전엔 개발자가 개별적으로 UI 컴포넌트를 일일이 작업하여 작업 효율성이 떨어진다는 피드백을 주었으나, 시스템화된 디자인 규격을 도입한 이후 개발자의 작업 효율이 향상되었습니다. 이 작업을 통해 개발자로부터 긍정적인 피드백을 받았고 협업 과정도 한층 더 원활해졌습니다.
