본문 바로가기

UX ⁄ UI

2장 콘텐츠 구성하기: 정보 설계와 애플리케이션 구조 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 방해되지 않는 정보 구조 설계하기 인터랙티브 경험에서는 인터페이스가 사용에 방해되지 않는 게 가장 중요하다. 정보 구조를 설계하는 일에는 보여주기, 검색하기, 탐색하기, 라벨링하기, 카테고리화하기, 정렬하기, 조작하기, 전략적으로 정보 숨기기 등이 포함된다. 정보 구조 아이러니 한 점은 잘못 설계되었을 때만 고객들이 알아차린다는 것이다. 반대로 정보 구조를 제대로 설계하면, 디자인은 눈에 보이지 않는다. 사용자에게 어떤 정보와 도구를 보여줘야 하는가? 어느 시점에 보여주는게 좋은가? 컨텐츠의 카테고리가 '빠짐 없이 중복되지 않도록' 한다. '사용빈도'를 가장 중요한 원칙으로 하여 자주 사용하는 항목은 검색하지 않아도 곧바로 보이게 한다. 사용 빈도가 낮으면.. 더보기
1장 문제를 정확히 파악하고 제대로 해결하는 디자인 - 사용자를 끌어들이는 UX/UI의 비밀 2022 우아한스터디 - UX 패턴파인더 스터디 4가지 영역으로 구성된 "사용자를 위한 디자인 프레임워크"를 되새기면, 타겟 고객이 현실에서 맞닥뜨리는 문제에 관한 통찰에 기반해 작업을 하고 있다는 확신을 가질 수 있다. 컨텍스트: 사용자는 누구인가? 목표: 사용자는 무엇을 하고자 하는가? 리서치: 사용자의 전후 사정과 목표를 이해하는 방법 패턴: 인터페이스 디자인과 관련된 사용자 인식과 행동 사용자를 둘러싼 컨텍스트 파악하기 01 인터랙션은 대화처럼 소프트웨어는 사람처럼 자율적으로 판단하여 상황에 빠르게 반응하지 못한다. 따라서 인터페이스와 사용자가 피드백을 자연스럽게 주고받으려면, 사람이 대화하는 방식을 모방하도록 소프트웨어를 디자인해야한다. 상대가 이해하기 쉽게 이야기해야하고, 활성상태라는 신호를 .. 더보기
여기서만나 UI 개발기 프로젝트를 하면서 페어인 심바와 가장 많이 했던 말 중 하나는 "역시 UI는 너무 어려워"였다. UI 개발은 정답이 뭔지도 모르겠고, 시간도 많이 소요되었다. 코드 짤 시간이 상당량 줄어드는 게 pain point였지만 그래도 재미있는 작업이었다. 언제 또 이런 경험을 해볼 수 있을까 싶은 마음으로 재밌게 고통받았다. JS 로직 작성 시간 못지않게 UI 개발에 시간을 들였다보니 간단하게나마 글로 남기고 싶다는 생각이 들었다. 그래서 figma에서 작업한 흔적을 모아 글로 엮어보았다. 초기 프로토타입 (개발 전) 발표를 위해 간단하게 제작한 프로토타입이다. figma가 아닌 PPT에서 도형으로 만들었다. 반나절만에 만들어서 현재 결과물과 차이가 있다. @ 중간지점 검색 기능 참석자추가 폼 UI 직접 입력 .. 더보기
마크업 & 웹접근성 베이스캠프 레벨4 마크업 및 웹접근성 수업 내용을 간단히 요약해보자. 📐 마크업 순서 생각해보기 1. head / body를 나눈다. 2. body를 header / main / footer 로 나눈다. 3. header에는 주로 nav를 넣는다. nav는 ul과 li로 작성한다. 4. main을 여러 section으로 나눈다. section에는 주로 h2를 함께 넣어주고, flex가 적절할지 grid가 적절할지 고민한다. 5. 필요할 경우 h1 / h2 / h3 / … 순으로 헤딩을 넣는다. 6. div가 많아지면 div를 대체할 다른 태그는 없는지 고민한다. 7. input은 label과 엮어주었는지, img에는 alt를 빼먹지 않았는지 등을 점검한다. 🧑🏻‍🎨 마크업 잘하는 사람의 특징 1. 시맨틱 태그를 잘.. 더보기
UI 특강 2탄 - 실무에 대하여 이 글은 황선수 님의 2021년 7월 13일 강의를 요약한 글입니다. 💡 황선수님 홈페이지 바로가기 http://hwangsunsoo.com/ 1. 업무 프로세스 UI 개발 업무는 실질적으로 다음과 같은 순서로 진행된다. 구분 내용 1 업무 요청 수령 - 기획자로부터 요청 수령, 기획서를 토대로 요구사항 식별 - 메일, 메신저, 지라 등으로 커뮤니케이션 2 업무 형태 파악 - 프로젝트 (신규) / 서스테이닝 (유지보수) 3 업무 범위 파악 - 기획서 또는 디자인 시안 토대로 요구사항 및 개발 검토 4 일정 & 스펙 협의 - 일정 산정 및 오픈일 🎉 결정 (PM의 의사결정에 참여) - 각 직군별 일정취합 배포일 지정 - 구현가능 범위 논의 (오픈일이 촉박할 경우 기능을 줄이고, 기능이 중요한 경우 오픈일을.. 더보기
UI 특강 1탄 - 궁금한 점 답변드립니다. 이 글은 박재선 님의 2021년 7월 13일 강의를 요약한 글입니다. 강의는 사전 질문에 대해 답변해주시는 식으로 진행되었습니다. UI 개발자는 무슨 일을 하나요? 프로젝트는 기획, 디자인, 개발 (UI / FE / BE) 로 나눌 수 있다. 이 중 UI 개발자는 기획 단계를 거쳐 디자인 결과물을 토대로 화면에 보이는 콘텐츠의 대부분을 담당한다. 한 마디로 말하자면, 기획 및 디자인 산출물을 받아서 페이지의 '뼈대를 만드는' 역할이다. UI 개발자는 기획문서를 보지 않는다는 오해가 있는데, 무조건 디자인 가이드만 보는 것이 아니라 상황에 따라 기획 문서도 본다. 디자인 작업에 직접적인 관여는 하지 않는다. 클릭했을 때 어떤 이벤트를 일으키는 비교적 단순한 이벤트부터, Parallax 같은 원페이지를 구현.. 더보기
사용성 테스트 (Usability Test) 안젤라님의 UX 강의와 함께 레벨3이 시작되었다. 프론트엔트를 공부하는 학생들에게 UX 수업을 준비해주셔서 이미 200%에 달했던 과정의 만족도가 더 올라갔다...! 수업 및 실습 내용을 간단히 정리해보자. 들어가면서... UI 와 UX 구분하기 UI (User Interface) 는 표현방식을 가리킨다. 우리가 사는 집을 예시로 들면 '벽, 창문, 집' 따위는 UI에 해당한다. 반면에, UX (User Experience)는 행동과 경험을 가리킨다. 집에서 생활하면서 느끼는 편안함, 행복은 UX에 해당한다. UX는 새로운 정보나 새로운 기능을 추가하는 것 뿐만 아니라, 기존의 사용 방식을 새롭게 진화시키는 것을 포함하는 개념이다. UI UX 표현방식 행동/경험 제품을 구성하는 재료, 제품 자체 e.g... 더보기
[UX 발견하기] 사회적 영향력 이용하기 사회적 자원을 이용해서 설득력을 높일 수 있는 방법에 대해 고민해보자. [1] 사용자가 행동하게끔 만들자. 인지과학 Insight 💫 설득의 기술(Persuasive technology: using computers to change what we think and do, 2003)을 저술한 Fogg에 따르면, 난이도가 낮을수록, 동기가 강할수록, 목표 행동을 달성할 가능성이 높아진다. 즐거움-고통, 희망-공포, 사회적 동의-거절와 같은 강력한 촉발제는 동기를 강화하여 목표 행동 달성 가능성을 높인다. 한편, 시간과 돈이 적게들수록, 육체적 또는 지적 노력이 적게 들수록 난이도가 낮은 것으로 간주하고, 사회적 일탈 행위에 가까울수록, 비일상적인 행동일수록 난이도가 높은 것으로 간주한다. 다음의 기술을 활.. 더보기