🔗 출처 모바일 UI 디자인 기본 요소 - Tab bar ✅ 요약 글로벌 내비게이션(GNB) 앱과 웹사이트가 제공하는 콘텐츠의 전체적인 탐색을 지원, 일관된 수단을 제공하기 위해 동일한 위치에 유지한다. 대부분 왼쪽에 로고, 중앙에는 최상위 레벨의 콘텐츠 그룹, 우측은 검색, 로그인, 장바구니 등의 기능이 있다. 점점 그래픽을 뺀 단순형태로 변화됨. 단순화되면서 콘텐츠가 부각되는 것을 볼 수 있다. 디바이스 크기별 GNB [PC, 노트북] 바 형태로 화면 상단 위치하거나 화면 왼쪽에 위치 / [태블릿]사이드바 / [모바일]하단 위치 Tab Bar는 모바일 앱에 최적화된 탐색 컨트롤 메일, 크라우드, 대시보드 등 기능위주의 데스크톱 앱은 많은 메뉴를 지원하기 위해 사이드바를 사용한다. 앱의 하위 레벨에서 ..

🔗 출처 UI를 위한 색 ✅ 요약 3가지 색속성 : 고유색, 채도, 명도 색 공간 : 디지털 프로덕트에서는 HEX, RGB를 주로 이용함 주색과 보조색 : Primary, Secondary, Black Gray White를 사용 색 계층 : 중요 정보 요소는 주색과 보조색으로 강조 (Low → Medium → High → Very High) 색 대비 : 다른 색과 확연히 구분되도록 함 (WCAG에서 나눈 레벨을 따르며 주로 AA(4.5:1) 레벨이 표준) 색 조합 : 색상환 기준으로 단색, 유사색, 보색을 활용 색 비율 : 60-30-10(포인트색) 법칙 활용 → 목적에 따라 공간에 알맞게 배색을 응용하여 구성 밝은 색과 어두운 색 : 자연에서의 색 변화 규칙에 맞춰 “밝기-채도-색조” 순으로 변형 (어..

🔗 출처 CS 담당자를 감동시키는 로그인/가입 UX 개선기 ✅ 요약 ‘라프텔’ 로그인/가입과정 목표 : 신규 유저는 빠르고 쉽게 / 기존 유저는 로그인한 수단을 잊지 않도록 개선 : 플로우 및 UI 개선, 버튼 통합, 전체적인 UX 개선 진행 개선 방법 로그인/가입 과정에 불필요한 뎁스 줄이기 → 첫 인상을 남기는 중요단계 로그인과 가입 버튼을 하나로 → 단순, 직관적인 인터페이스 툴팁으로 마지막으로 로그인한 수단을 알려주기 → 다양한 소셜 계정으로 로그인 정보가 기억 나지 않는 것을 방지 대응되지 않고 있던 에러 케이스(불친절, 공통에러모달 등으로 적절하지 않은 UX Writing) → 케이스에 맞는 명확한 문구, 해결방안 제시로 변경 자잘한 로그인 UX 개선 → 실수를 방지하기 위한 비밀번호 보기 및..

🔗 출처 UX 라이팅이요? 라이터가 없으면 디자이너가 해야지 도서명 : 그렇게 쓰면 아무도 안 읽습니다. 저자/출판 : 전주경/월북 소개 : 한국 UX 라이팅의 최전선에서 10년 넘게 일해온 LINE 현직 UX 라이터 전주경이 생생한 문장으로 지금까지 겪은 실무의 개괄과 노하우를 담은 책 ✅ 요약 UX 라이팅이란? 구체적인 정보 상호작용을 하는 일 중요한 이유 : 제품과 서비스의 불완전함을 잠시 해결할 수 있음.(서비스의 사용성) 필요 역량 : 객관적 근거, 언어 지식, 그리고 어떤 의미를 갖는지 설명할 수 있어야 함. 어학적 지식, 2.UX/UI 디자인 역량, 문제해결능력, 3.정보(텍스트) 관리 역량 UX 라이팅 원칙 : 무엇을 말할 것이냐 → 어떻게 말할 것이냐 순의 고민 정확성 (빠짐없이 전달, ..

🔗 출처 UI 디자인 완성도 올리기, 레이아웃 ✅ 요약 레이아웃에서 리듬은 생동감(경쾌한 느낌, 생명력 부여, 친근함) → 균형은 안정 → 즉 리듬과 균형은 세트아이템 같은 관계 균형을 맞추기 위해 필요한 방법은 ‘반복’ 💬 코멘트 정보를 전달하기 위해서 시각적인 안정의 균형이 중요하지만 일정한 균형으로만 이루어진다면 지루할 수 있고 딱딱하게 보일 수 있다. 디자인의 창의성을 돋보이게 하기위해 아니면 흥미를 주거나 유연함을 주기 위해 리듬의 요소를 첨가하는 것 같다. 균형과 리듬을 적절히 사용한다면 경쾌하지만 균형을 이루는 레이아웃이 될 수 있는 것 같다. 요즘은 균형적인 레이아웃에 리듬이 적절히 어우러진 사이트들이 많아졌다. 또한 트렌디하거나 혁신적인 디자인의 레이아웃에서는 리듬요소의 비율이 높더라도 ..

🔗 출처 점검 등 불쾌한 상황을 긍정적으로 전달하는 비법 ✅ 요약 점검, 업데이트 등으로 즉시 게임을 못하는 경우는 시용자가 원하는 목적을 달성하지 못할 때 분노로 다가옴 점검이 언제까지 지속되는지 안내 → “점검 종료까지 남은시간 카운트다운” 같은 내용이라도 표현하는 방법에 따라 달라짐 → “당신의 경험을 향상하기 위해 게임을 개선했습니다.”, “Good News!” 등 긍정어휘가 좋은 소식으로 만들어 줌 인터넷 연결에 문제가 있을 때 → 게임 속 캐릭터를 활용(난처한 표정, 몸짓) → 친근하게 전달하며 몰입감을 깨뜨리지 않음. 또한 직관적으로 내용을 빠르게 파악할 수 있음 💬 코멘트 게임을 할 때 갑자기 꺼지거나 팝업이 뜨면 그 순간 몰입감이 깨지기 마련인데 그럴 때 게임캐릭터를 활용한 게임들은 확실..

🔗 출처 2024년 UX/UI 디자인 트렌드 훑어보기 ✅ 요약 🔸 2024년의 UX/UI 디자인 트렌드 AI를 통합한 디자인 도구 챗GPT, 미드저니 등 생성형 AI를 디자인 분야에서 활용 → 디자이너들의 디자인 작업 생산성을 높임 → 비전공자 또한 쉽게 디자인할 수 있음 AR/VR에서의 공간 디자인 사용성 문제가 대중화의 장벽 → 애플의 ‘Apple Vision Pro‘를 공개하며, 새로운 UI 원칙과 신체를 활용한 인터랙션을 소개 → 혼합현실을 ‘공간 컴퓨팅’으로 명명 메타버스 고도화 고객에게 제공할 수 있는 가치에 따라, 생성형 AI를 융합해 한층 고도화된 형태의 메타버스를 제공할 예정 (ex.KT의 ‘초거대 AI 믿음’) 환경친화적 디자인과 접근성 고려 환경을 생각하는 일이 갈수록 중요해지고 있음..

🔗 출처 “좀 더 좋은 UX 라이팅”에 숨은 두 가지 의미 ✅ 요약 💡 ‘텍스트 기반의 콘텐츠를 개선해, 보다 나은 경험을 제공하고 싶다’ 사용자와 소통하기 위해서는 내용을 전달해야 하고, 그 내용을 전달하는 것은 결국 텍스트다. 🔸 UX 라이팅에서 텍스트를 ‘더 좋게 만든다’는 것 효율적인 텍스트 : 최소한의 텍스트로 최대한의 효과를 얻는 것 즉, 사용자가 가장 적은 시간과 노력을 들여 목적을 달성할 수 있어야 효율적이라고 할 수 있다. 어떤 방법이 있을까? ➡️ 동일한 내용 반복을 제거, 같은 내용이지만 더 간결하게 표현 텍스트 양이 적어야만 효율적인가? ➡️ 텍스트가 중복과 누락없이 제 기능을 하고 있다면 양이 많더라도 효율적인 활용으로 볼 수 있다. 대신 필요한 내용을 미리 안내해 불필요한 과정을..

🔗 출처 UX·UI 레벨 테스트 UX UI 레벨테스트 정리 💬 코멘트 UX/UI와 관련한 테스트들로 실제로 사용되고 있는 앱에서도 볼 수 있는 문제들이였다. 내가 사용자라면 보기 편안한, 도움이되는, 효율적인지를 판단하며 풀어볼 수 있었고 내가 디자이너라면 예쁜 구성, 강조할 부분등을 생각해보며 풀어볼 수 있었다. 또한 헷갈리더라도 대부분 사용하는 구성 방식들을 생각하며 푼 문제도 있었다. UX/UI 레벨 테스트를 통해 맞거나 틀리더라도 정답과 함께 근거가 되는 해설/이유를 쉽게 알려주고 관련된 도서도 추천해줘서 그냥 재미삼아 하는 테스트가 아닌 도움이 되는 테스트였다. 이런 비슷한 테스트들이 많이 생긴다면 재밌게 배울 수 있을 것 같다.

🔗 출처 기다림을 지루하지 않게, 문제를 전달하는 법 ✅ 요약 서비스 사용도중 와이파이가 끊기거나 정보를 요청해서 기다려야하는 상황에 ‘빈 화면’이나 ‘알 수 없는 영문페이지’를 마주할 때 → 유저들은 무엇이 잘 못 되었는지, 어떤 정보를 받기 위해 기다려야 하는건지 답답함을 느낌 배민 → 빈 화면이든 어떤 화면도 배민만의 페이지로 구성되어 있는데 네트워크가 끊어졌을 때는 일반적인 화면 토스 → 금융 서비스다보니 정보 전달에 특화, 토스만의 보이스톤으로 일관된 UX 라이팅을 제공 네이버/스타벅스/브런치 → 네트워크 끊어졌을 때 대부분의 서비스들은 ~할 수 없다 / 않는다로 나타내는데 스타벅스에 경우 확인해 주세요 + 어떻게 연결 해야하는지를 안내하고 있다. 💬 코멘트 유저가 해야하는 첫번째, 제일 중요한..