2025.01.24아티클: 신입 UX 디자이너로 첫 커리어를 시작하기 https://brunch.co.kr/@migyeongux/49 신입 UX 디자이너로 첫 커리어를 시작하기신입 디자이너로서 취업하기 위한 필수 능력 | 신입(주니어) UX 디자이너에게 가장 많이 회사에서 요구되는 능력은 피그마와 같은 디자인 도구를 사용하여 시각디자인, 와이어프레임 및 프로토brunch.co.kr 1. 사용성과 접근성을 고려한 디자인1. 모든 사용자가 인터페이스를 쉽게 이해하고 사용할 수 있도록 고려하면서 디자인 해야한다.자신의 디자인 작업을 다양한 사람들에게 보여주고 사용자 테스트를 하면서 개선 해야한다. 2. 접근성 표준을 따라 웹 콘텐츠를 디자인할 수 있어야 한다.색 콘트라스트 체크, 최소한의 폰트 사이즈, 시..
2025.01.23.아티클UI 디자인 가이드 : 닫기와 뒤로가기 설계는?https://brunch.co.kr/@august9/362 뒤로가기의 종류1. 하이어라키백(Hierarchy Back)계층 간 이동을 말하며, 하위 개념에서 상위 개념으로의 이동을 말한다.때로 이전에 봤던 화면을 가로질러 이동할 수 있다. 예시1) 팝업창에서 Back 버튼을 사용해 이전 계층으로 이동2) 모달 팝업창에서 팝업 외부 터치 시 취소버튼과 동일하게 동작하도록 구성3) 토스트 팝업에서 우측 상단에 위치한 닫기 버튼으로 이동4) 바텀 시트의 좌측 상단에 아랫방향의 화살표 아이콘 사용 2. 히스토리백(History Back / System Back)이전 화면을 역순(이전)으로 이동하는 것을 뜻한다. 예시1) 뒤로가기2) 이전화..
2025.01.22.UX를 해치지 않는 팝업의 3가지 조건 (원본글)https://brunch.co.kr/@cliche-cliche/231 UX를 해치지 않는 팝업의 조건팝업이란?사용자의 주의를 즉걱적으로 끌 수 있는 도구이다.이를 남용하면 사용자의 불편함은 물론 신뢰를 한꺼번에 잃을 수 있다.팝업 시점이 어설프거나 나쁜 의도가 보이면 이탈률을 증가시키고, 서비스에 부정적인 인상을 남긴다. 1) 팝업의 사용 시기언제 써야 하는가?중요한 공지사항이 있을 때자칫 사용자가 금전적 손해를 입을 수 있을 떄사용자의 명시적 동이가 필요할 때중요한 기능이나 업데이트 안내 언제 지양해야 하는 가?광고나 프로모션을 과도하게 노출할 때사용자에게 너무 잦은 확인을 받으려 할 때팝업 내용이 너무 공급자 중심의 정보일 때다른 ..
2024.01.18.업무 효율을 높이는 피그마 플러그인 원본글https://brunch.co.kr/@taekil/9 업무 효율을 높이는 피그마 플러그인가장 강력한 UXUI 툴 피그마장점운영체제에 상관없이 브라우저 환경만 지원하면 태블릿에서도 사용할 수 있다.다양한 직무들이 제품을 놓고 협업하기 좋은 환경을 구축하게 해준다. 플러그인:플러그인들을 잘 활용하면 반복적인 작업이나 전체에서의 일부 수정, 레이아웃의 변경에 따른 디자인 수정 등등 귀찮은데 안 중요하기하고, 그렇다고 안 하자니 팀간 소통에 더 오해만 만드는 작업들을 정만 간단하게 처리할 수 있다. 제품의 주요정책을 반영하거나 협업에도 엄청난 시간을 절약시켜주고 효율성을 극대화해준다. 1. Content Reel마이크로소프트에서 만든 피그마 플러그인..
2025.01.17.https://brunch.co.kr/@dldydwo815/54UX/UI 레퍼런스 200% 활용법 원본글위에 링크에 들어가면 다양한 레퍼런스, 아티클 사이트가 나온다. UX/UI 레퍼런스 200% 활용법1. 레퍼런스, 아티클 사이트2. 평소에 레퍼런스를 볼 때는 어떻게?-평소에 다양한 앱이나 웹 서비스를 써보고 흥미로운 부분이 있다면 이곳저곳 둘러보고 아티클도 주기적으로 읽는 습관을 만드는게 좋다. 어떤 생각을 하면서 or 집중해서 레퍼런스를 살펴야 하는가?(1) 겉으로 보이는 디테일한 문구, 디자인, 인터렉션 등 보며 ‘이런 디자인도 있네 / 이런 인터렉션도 가능하네 / 이런 배치도 가능하구나!’처럼 생각하시는 것도 좋지만 (2) 이 기능은 왜 만든 것일까? / 같은 기능이라도 A처..
2025.01.16.UX 원칙 One thing per page 원본글https://brunch.co.kr/@chulhochoiucj0/31UX 원칙 One thing per page모바일은 작은 화면으로 인해 콘텐츠를 읽기가 어려움.키보드 같은 외부 입력도구가 없어 작은 화면 내의 가상의 키보드에 엄지손가락으로 입력하기 때문에 정확도가 떨어지고 오류가 발생한다.한 화면에 많은 입력과 선택을 요청하면 정보의 양이 많고 복잡해 보여 사용자는 입력을 포기하고 이탈해 버리거나 프로세스 진행을 망설일 수 있다. “One thing per page”(페이지당 한 항목)는 한 페이지에 한꺼번에 많은 정보 입력을 요청하기보다 단계를 나눠 한 가지 질문에 해당하는 입력과 선택을 요청하는 인터페이스가 더 사용성이 높다는..
웹콘텐츠를 읽는 5가지 패턴https://brunch.co.kr/@fbrudtjr1/88 웹콘텐츠를 읽는 5가지 패턴제이콥 닐슨이 F패턴 이론을 발표한 이후 15년이 지났지만 지금까지 F패턴은 UX관계자들 사이에서 교과서처럼 인용되고 있다. 아무도공개한 F패턴에 대한 글은 닐슨 노먼 그룹에서 발간하는 유료 보고서 판매를 위한 홍보글이었다. 사람들은 보고서를 구매하는 대신 제이콥 닐슨의 글만을 보고 F패턴만이 유일한 패턴이라고 착각하였다. 실제로 유료 보고서에는 총 5가지 패턴을 소개하고 있다.1. F Pattern2. Bypassing Pattern3. Layer Cake Pattern4. Spotted Pattern5. Commitment Pattern 1. F Pattern기사, 스토리 등 텍스트가 ..
2025.01.10UI 용어를 정리해야 하는 이유https://brunch.co.kr/@tigrisdesign/2위 링크에 있는 이미지 첨부된 원본 글 참고팀 내, 타 부서와의 원활한 소통을 위해서 UI 용어 정리 메뉴 종류1) GNB웹사이트 최상위 메뉴를 GNB라고 부른다. 모든 페이지에서 공통적으로 보이는 메뉴바로 대부분 상단에 위치한다. 2) LNBGNB 메뉴를 클릭 혹은 마우스 올린 상태(hover) 일 때 보이는 메뉴로 서브 페이지, 특정 메뉴로 바로 이동할 수 있다. 3) SNB상단 메뉴를 제외한 왼쪽에 붙은 메뉴바 SNB 혹은 LNB라고 부른다. 4) FNB, Footer최하단 메뉴로 FIB라고 부릅니다. 로고, 주소, 전체 메뉴 영역 외에도 SNS 채널, 패밀리 사이트 등을 배치하기도 한다..
2025.01.8.사용자 인터뷰로 숨은 니즈 발견하기https://brunch.co.kr/@maju/42 더블 다이아몬드 모델Discover – Define – Develop - Deliver인터뷰는 왼쪽 발견 단계에 속한다. 인터뷰를 통해 문제를 발견하면, 이를 분석하는 단계인 정의 단계로 이어지며, 왼쪽 다이아몬드 전체에 영향을 준다. 왼쪽 다이아몬드 (Define)1. 발견 단계여러 현상 속에서 문제의 본질을 찾고, 사용자들의 경험을 관찰하여 문제 정의에 필요한 단서를 찾는 단계이다. 데스크 리서치, 필드 리서치로 구성되어 있다. 1) 데스크 리서치: 책상에 앉아서 하는 리서치로, 문헌이나 리포트 자료 등을 통해 시장 동향, 경쟁사 조사, 기술 동향, 트렌드 동향 등을 조사하는 것이다. 이미 존재하..