본문 바로가기

UI

2장 콘텐츠 구성하기: 정보 설계와 애플리케이션 구조 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 방해되지 않는 정보 구조 설계하기 인터랙티브 경험에서는 인터페이스가 사용에 방해되지 않는 게 가장 중요하다. 정보 구조를 설계하는 일에는 보여주기, 검색하기, 탐색하기, 라벨링하기, 카테고리화하기, 정렬하기, 조작하기, 전략적으로 정보 숨기기 등이 포함된다. 정보 구조 아이러니 한 점은 잘못 설계되었을 때만 고객들이 알아차린다는 것이다. 반대로 정보 구조를 제대로 설계하면, 디자인은 눈에 보이지 않는다. 사용자에게 어떤 정보와 도구를 보여줘야 하는가? 어느 시점에 보여주는게 좋은가? 컨텐츠의 카테고리가 '빠짐 없이 중복되지 않도록' 한다. '사용빈도'를 가장 중요한 원칙으로 하여 자주 사용하는 항목은 검색하지 않아도 곧바로 보이게 한다. 사용 빈도가 낮으면.. 더보기
1장 문제를 정확히 파악하고 제대로 해결하는 디자인 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 4가지 영역으로 구성된 "사용자를 위한 디자인 프레임워크"를 되새기면, 타겟 고객이 현실에서 맞닥뜨리는 문제에 관한 통찰에 기반해 작업을 하고 있다는 확신을 가질 수 있다. 컨텍스트: 사용자는 누구인가? 목표: 사용자는 무엇을 하고자 하는가? 리서치: 사용자의 전후 사정과 목표를 이해하는 방법 패턴: 인터페이스 디자인과 관련된 사용자 인식과 행동 사용자를 둘러싼 컨텍스트 파악하기 01 인터랙션은 대화처럼 소프트웨어는 사람처럼 자율적으로 판단하여 상황에 빠르게 반응하지 못한다. 따라서 인터페이스와 사용자가 피드백을 자연스럽게 주고받으려면, 사람이 대화하는 방식을 모방하도록 소프트웨어를 디자인해야한다. 상대가 이해하기 쉽게 이야기해야하고, 활성상태라는 신호를 .. 더보기
여기서만나 UI 개발기 프로젝트를 하면서 페어인 심바와 가장 많이 했던 말 중 하나는 "역시 UI는 너무 어려워"였다. UI 개발은 정답이 뭔지도 모르겠고, 시간도 많이 소요되었다. 코드 짤 시간이 상당량 줄어드는 게 pain point였지만 그래도 재미있는 작업이었다. 언제 또 이런 경험을 해볼 수 있을까 싶은 마음으로 재밌게 고통받았다. JS 로직 작성 시간 못지않게 UI 개발에 시간을 들였다보니 간단하게나마 글로 남기고 싶다는 생각이 들었다. 그래서 figma에서 작업한 흔적을 모아 글로 엮어보았다. 초기 프로토타입 (개발 전) 발표를 위해 간단하게 제작한 프로토타입이다. figma가 아닌 PPT에서 도형으로 만들었다. 반나절만에 만들어서 현재 결과물과 차이가 있다. @ 중간지점 검색 기능 참석자추가 폼 UI 직접 입력 .. 더보기
피그마(figma) 입문 - 기본 환경 이해하기 피그마(figma)는 전세계 UX, UI 디자이너가 가장 많이 사용하는 UI 디자인 프로토타이핑 툴이다. 가파른 성장곡선을 그리며 2017년에는 5위, 2019년에는 2위, 그리고 2020년에는 1위를 차지하며 스스로 '대세' 툴임을 보여주고 있다. (통계 출처: uxtools.co/) 이렇게 사랑받는 비결로는 다음과 같은 특장점을 들 수 있다. 1. 실시간 협업에 최적화 2. 높은 재사용성 - 스타일, 컴포넌트 활용 - 벡터 이미지 기반으로 디바이스별로 쉽게 리사이즈 가능 3. 무료버전에서도 충분히 기능사용 가능 4. 오프라인 상태에서는 사용이 제한적임 5. 서드파티의 오픈소스 플러그인, 템플릿이 풍부함 인터페이스 피그마의 인터페이스는 입문자도 빠르게 적응할 수 있도록 직관적으로 구성되어 사용자의 효율.. 더보기