반응형

1-3 모바일 디자인 트렌드의 변화

  • 스큐어모픽 디자인 - 사물을 사실적으로 표현하는 디자인 기법 (애플 iOS). 2012년까지 스큐어모피즘이었던 iOS (스마트폰이 세사에 막 나왔을 때라 추상적인 인터페이스가 아직 낯설었기 때문), Bitmap비트맵 (하나의 디자인에 하나의 해상도만 최적화 가능)
  • 플랫 디자인 - 현실성 사라지고, 평평한 형태로 디자인. 구성과 색상을 직관적으로 표현하는 2D 디자인 기법, 벡터 Vector (하나의 디자인으로 다양한 디바이스에 대처가능 - 시각적 일관성 유지하기가 스큐어모픽 보다 유리)
  • 머티리얼 디자인 - 플랫 디자인에 그림자 같은 현실적 요소를 더함 (구글), 그리드 기반의 레이아웃, 계획적인 색상 설계, 의도적인 여백
  • 메트로 UI (Flat) - 사각형 타일을 기반으로, 과감한 색면과 아이콘 등을 조합한 것이 특징. 각 타일을 클릭하면 해당하는 프로그램이 실행되는데, 새 창이 아닌 화면 전체를 채우는 방식으로 작동.
  • 뉴모피즘 - 빛과 그림자로 사실적이면서도 미래적. 빛과 그림자로 요소와 배경을 구분하여 부드러운 첫인상. 촉각적. 찰흙을 보면 말랑함이 느껴지고 이내 만지고 싶은 욕구가 든다. 이와 유사하게 뉴모피즘은 스타일링만으로 각 요소의 어포던스(행동 유도성)가 높게 설정된다. (but,  화면 전체에 어포던스가 높아지는 것은 아님. 모든 요소가 강조되면 위계질서가 약해짐). 음각 형태 효과는 착시를 주기도 해서 사용자의 예측 가능성을 떨어뜨려 멘탈 모델에 영향을 줄 수도 있는 등 여러 가지 한계가 있음.

 

2-1 해상도 이해하기

  • 픽셀 : Picture Element의 준말. 화면 또는 이미지에 쓰인 최소 단위.(화소도 픽셀과 동의어)
  • 비트맵 : 비트맵 방식으로 디자인하기 위해서는 점묘화 처럼 무수히 많은 픽셀이 필요. (BMF, JPG, GIF, PNG)
  • 벡터 : 이미지 파일 형식. 수학적 연산으로 선분과 면을 만들기 때문에 확대해도 깨지지 않고, 확대해도 용량이 변하지 않음. 이미지 손실이 없어야 하는 로고, 캐릭터, UI 디자인 등에 많이 활용됨. (AI, EPS, SVG)

목적에 맞는 해상도 설정
디지털을 다루는 디자이너에게 해상도란 출판 편집 디자이너의 종이 규격과도 같음. 보편적으로 사용하는 해상도가 존재. 실무에서 이를 파악하기 위해 *스탯카운터 statcounter라는 웹 트래픽 분석 사이트를 이용함.

해상도의 기준은 서비스를 이용할 사용자가 되어야 한다. 사용자를 고려하지 않고 '요즘 많이 쓰인다.'는 이유로 해상도를 결정한다면 문제가 발생한다. 예) 새로운 기기 보급률이 상대적으로 낮은, 중장년 또는 노년층을 대상으로 한 서비스의 해상도에 최신 기기만 고려하면 문제가 될 수 있음.

 

반응형

'디자인 > UX UI' 카테고리의 다른 글

웹/앱 클론 디자인  (0) 2024.05.08
[피그마 플러그인 추천] Flow chart 유저플로우, 플로우차트 쉽게 만드는 플러그인  (0) 2024.05.07
컴포넌트 만들기 - 참고하면 좋을 웹사이트  (0) 2024.05.03
내가 생각하는 UX/UI 디자이너의 핵심 역량  (0) 2024.05.03
UX/UI 책 스터디 <사용자를 사로잡는 UX/UI 실전가이드> -2  (0) 2024.05.02
반응형

  • 책 이름 (부분 1-2) : UI의 구조와 요소 
    사용자를 사로잡는 UX/UI 실전가이드

    내용 요약 :
     
    UI의 구조와 요소 

    멘탈 모델 Mental Model : 난생처음 방문하는 웹사이트 또는 모바일 앱에서도 원하는 정보를 찾으려면 어디로 가야할 지 대략 감이 온다. 이런 예측가능성을 의미함. (예 : 링크를 클릭 하면 새로운 창이 뜰 거라는 기대감)
    → 그렇기 때문에 사용자 경험을 설명하는 것은 무에서 유를 만드는 창작 활동과는 다르다. 사람들에게 익숙한 경험을 통해 직관성을 높여야 한다. 만약 지나치게 창의적이거나 관습을 무시하고 UI를 디자인한다면 사용자는 이를 낯설게 여길 것이다. (이를 멘탈 부조화라고 한다. Mental Model Discordance) → 사용자들의 익숙한 경험을 통해 경험을 높여야 한다.
  • 그래서 디자이너는 통상적으로 활용하는 UI구조와 요소에 무엇이 있는지와 어떤 역할을 하는지 알아야 함.

    UI 구조
  • 웹사이트 : 가로 구조형과 세로 구조형이 있고 '헤더, 콘텐츠 영역, 푸터'가 있다.
  • 모바일 사이트 : 보통 화면 위에 내비게이션을 배치하거나 맨 아래에 탭 바를 함께 사용해 주요 페이지로 이동하거나 기능을 한 눈에 볼 수 있게 한다.

    UI 요소
  • 체크 박스 (다중 선택 필요할 때)
  • 라디오 버튼 (한 번에 한 항목만)
  • 드롭다운 목록 (한 번에 한 항목만, 클릭하면 펼쳐져서 공간을 아낄 수 있다. 그렇다고 한 번에 제공하지 않도록 주의해야 한다.)
  • 스피너 (Datepicker, Timepicker: 주로 날짜, 시간 입력에 쓰이며 웹 보다 모바일에서 자주 발견)
  • 토글 버튼 (2가지 모드 중 1가지를 선택할 때 사용, 즉각적 응답 필요시 자주 사용 - 와이파이 또는 다크 모드 설정)
  • 날짜/시간 피커 (화면 크기에 한계있는 모바일, 공간 절약하며 날짜/시간 선택할 수 있는 영역. 보통 달력 모양으로 디자인하며 사용자가 선택한 날짜와 시간은 시스템에 입력됨)
  • 텍스트 필드
  • 검색 필드
  • 브레드크럼 (사용자의 위치 파악)
  • 페이지pagination (한 페이지에 나오는 콘텐츠 양이 정량을 넘을 때 분류하고 남은 페이지가 얼마나 되는지를 보여주는 UI)
  • 슬라이더 (사용자가 원하는 대로 값을 조정하는 영역, 음량 및 밝기 조절에 사용, 여행 앱에서 날짜 같은 범위를 적용할 때도 사용)
  • 태그 (유사한 콘텐츠를 분류하기 위한 인터페이스, 사용자가 원하는 태그를 추가할 수 있는 형태도 있음)
  • 이미지 캐러셀 image carousel 여러 장의 이미지를 좌우로 이동하며 볼 수 있는 인터페이스, 이미지가 얼마만큼 더 있는지를 알려 주는 인디케이터가 하단에 있음)
  • 알림 notification (새로운 정보가 도착했다는 것을 알리는 인터페이스, 알림확인하면 사라짐
  • 진행바 progress bar (로딩이 길 때 사용하는 인터페이스)
  • 스피너 로딩 spinner loading (진행 바보다 짧은 로딩에 사용하는 인터페이스, 4초 이하라 진척도 알 수 없음)
  • 툴팁 tooltip (기능 아이콘에 추가 설명이 필요할 때, 마우스 포인트를 얹으면 나타나는 설명 창, 모바일에서는 툴팁유도를 위해 물음표 아이콘을 사용하기도 함)
  • 팝업 (사용자 진행을 돕거나 시스템 오류 같은 공지가 필요할 때 사용)
  • 아코디언 (전달할 내용이 많고 항목에 따라 내용이 나뉠 때 사용하는 인터페이스)
  • 툴바 Tool bar (주요 기능을 모아 높은 인터페이스로, 도구 모음이라고도 부른다. 주로 오피스 제품군, 그래픽 편집기, 같은 소프트웨어에서 볼 수 있음)
  • GNB global navigation bar (주로 웹 페이지 상단에 있으며 클릭하면 링크된 페이지로 이동할 수 있다.)
  • LNB left navigation bar (일반적으로 화면 왼쪽에 위치하는 메뉴 형태로  SNB side navigation bar라고도 불림)
  • 탭바 tab bar (모바일 앱 하단에 표시되는 아이콘 모음, 페이지 이동 가능)
  • 모달 윈도우 modal window (기존 페이지와 부모-자식 관계의 창이 뜰 때 집중력을 높이기 위해 배경을 이동하는 인터페이스. 이 때 창을 제외한 영역은 제어할 수 없다. 모달 윈도우는 배경과 구분되도록 명도를 확실히 조정하는 것이 좋다.)
  • 토스트 팝업 toast pop up (진행에 필요한 간단한 피드백을 제공할 때 사용하는 인터페이스. 모달 윈도우와 달리 팝업을 제외한 영역을 제어할 수 있다. 토스터에서 빵이 튀어나오는 모습과 비슷해서 지어진 이름)
  • 빈 화면 Empty Data (표시할 데이터가 없을 때 띄우는 화면)
  • 코치 마크 Coach Marks (사용자가 처음 앱을 열었을 때, 중요 기능을 미리 알려 주는 인터페이스, 진행에 필요한 기능을 사전에 학습시키는 역할을 한다. 단, 사전 학습이 필요할 정도로 기능이 다양하거나 인터페이스가 낯설 때만 사용하는 것이 좋으며 설명이 필요 없을 정도로 간단한 앱에는 지양함)
  • 좋았던 점:
  • 심플하면서도 잘 이해가는 설명 : 기존에 알고 있던 요소들이지만 이미지들과 함께 전체적으로 한 번 보니 복습도 되고 정리가 된다. 
  • 이미 알고 있는 부분이지만 간혹 가다 몰랐던 부분도 있어서 유익했다.
  • 아쉬웠던 점:
    • 이 요소들이 어떻게 실제로 적용이 되는지 영상으로 볼 수 있는 큐알코드가 있으면 좋았을 것 같다.
  • 알게 된 개념:
    • UI 요소들
 
 
 
반응형

'디자인 > UX UI' 카테고리의 다른 글

컴포넌트 만들기 - 참고하면 좋을 웹사이트  (0) 2024.05.03
내가 생각하는 UX/UI 디자이너의 핵심 역량  (0) 2024.05.03
UX/UI 책 스터디 <사용자를 사로잡는 UX/UI 실전가이드> -1  (1) 2024.05.02
UX/UI 디자인 직무 채용공고 분석 (취업)  (1) 2024.04.30
UX/UI 기본용어 정리  (0) 2024.04.30
반응형

  • 책 이름 / 부분 1-1 : 사용자를 사로잡는 UX/UI 실전가이드
  • 내용 요약 :
     
    UX/UI 디자인 진행과정 : 주로 사용되는 더블 다이아몬드(Double Diamond) 프로세스
    1. 발견 (Discover): 사용자의 니즈를 발견하고 문제를 정의하는 단계입니다. 리서치를 통해 데이터를 수집하고 사용자의 요구사항을 파악합니다.
    2. 정의 (Define): 발견한 문제를 바탕으로 전략을 수립하고 콘셉트를 도출합니다. 페르소나나 저니 맵을 활용하여 사용자의 특성과 경험을 분석합니다.
    3. 발전 (Develop): 문제를 해결하기 위한 방법을 논의하고 실질적인 디자인 작업을 진행합니다. 정보 구조화와 와이어프레임을 제작하여 디자인을 발전시킵니다.
    4. 전달 (Deliver): 디자인을 완성하고 비주얼 디자인을 진행합니다. 내부 테스트를 거쳐 오류를 수정하고 최종적으로 사용자에게 제품을 전달합니다.
    이러한 과정을 통해 사용자 중심의 디자인을 구현하고, 사용자가 원활하고 만족스러운 경험을 할 수 있도록 합니다.

    UI 디자인
  • UI 디자인은 사용자 인터페이스(User Interface) 디자인의 약자로, 사용자와 시스템 사이의 상호작용을 담당하는 디자인입니다. 쉽게 말해, 제품이나 서비스의 시각적 구성 요소를 디자인하는 것을 의미합니다. 모바일 앱, 웹사이트, 가전제품의 패널 등 다양한 제품과 서비스에 적용됩니다. UI 디자인은 컬러, 타이포그래피, 아이콘 등 시각적인 요소를 고려하여 사용자가 제품을 쉽게 이해하고 사용할 수 있도록 합니다.
  • UX 디자인은 사용자 경험(User Experience) 디자인의 약자로, 제품이나 서비스와 상호작용하는 과정에서 사용자가 느끼는 전반적인 경험을 디자인하는 것을 말합니다. 사용자의 니즈와 목표를 파악하여 그에 맞는 쾌적하고 효율적인 경험을 제공하는 것이 목표입니다. UX 디자인은 사용자의 배경, 요인, 행동 방식, 내적 욕구, 정서적 반응 등을 고려하여 제품이나 서비스를 설계하고 실행하는 것을 포함합니다.
  • 좋았던 점:
  • 깔끔한 개념 설명 : UX와 UI 디자인에 대한 개념을 명확하게 설명하여, 독자들이 이해하기 쉽도록 했습니다. 각 개념의 중요성과 역할에 대해 잘 정리되었습니다.
  • 역할의 구체성: 제품 디자이너와 UX/UI 디자이너의 역할에 대한 구체적인 설명이 도움이 됩니다. 이를 통해 디자인 분야에서의 다양한 역할들을 이해하는데 도움이 되었습니다. 특히 프로덕트 디자이너에 대해 기술할 때 기능 중심 조직과 제품 중심 조직을 언급하며 설명되어 있는 부분이 마음에 들었다.
프로덕트 디자이너 - 제품 중심 조직의 디자이너. 프로덕트 디자이너 Product Designer 는 디지털을 다루는 디자이너가 비교적 최근 에 얻은 직함이다. 프로덕트 디자이너를 구별하기 위해서는 조직 구조를 이해해야 한다. 조직 구조에는 크게 제품 중심 조직과 기능 중심 조직이 있는데 프로덕트 디자이너는 제품 중심 조직에 속한다. 

반대로 최근 국내외 스타트업에서 많이 볼 수 있는 구조가 제품 중심 조직 이다. 이런 형태의 조직에선 기획-디자인-개발처럼 기능 단위로 팀을 구분하지 않고 기업이 개발하려는 제품에 따라 각 파트를 묶는다. 즉, 하나의 큰 서비스에서 검색 팀, 상세 페이지 팀, 탐색 팀, 통계 팀 등으로 나누는 식 이다. 팀마다 프로덕트 오너, 프로덕트 디자이너, 엔지니어 등이 포함되어 있고 이를 스쿼드(Squad)라고도 부른다. 같은 스쿼드에 소속해 있지는 않지만 한 조직의 전문가(디자이너, 개발자) 그룹을 챕터 Chaper 라고 부른다. 이러한 명칭들은 조직 특성에 따라 변화할 수 있다.그리고 개발 배포 후 시장에서의 사용자 피드백을 바탕으로 제품을 점진적 으로 개선하는 역할을 맡는다. 이러한 특성 때문에 프로덕트 디자이너는 금융, 전자책, 식재료, 여행, 데이팅처럼 특정 산업군 내 속해 있을 가능성이 크다. 따라서 프로덕트 디자이너는 인터페이스를 빼어나게 만드는 것만으로는 부족하며 종사한 산업군에 대한 깊은 지식(도메인 지식)이 반드시 필요하다.
(p26-27)
  • 이 조직에서 프로덕트 디자이너는 프로덕트 오너와 함께 시장에서 직접 고객 니즈를 조사하고 제품 개발에 반영한다. 또, 한 번의 개발 과정으로 결과를 내기보다 기획-디자인-개발 전 과정에 걸쳐 관계자와 긴밀히 협업한다.

    기능 중심 조직
  • 10년 전 내가 첫 커리어를 시작한 회사는 기능 중심 조직에 가까웠다. A라 는 제품을 만들기 위해 기획 팀, 디자인 팀, 개발 팀이 따로 있었고 각 팀에 는 팀장이 존재했다. 기획자가 기획 문서를 디자이너에게 전달하고 완성된 디자인을 디자이너가 개발자에게 전달하는 식으로 일이 진행되었다. 이를 워터폴 방식이라 한다. 워터폴 방식에선 각 파트의 기능 전문성이 중요하기 때문에 기능 중심 조직이라고 한다. (기능 중심 조직 : 기획팀 > 디자인팀 > 개발팀)
  • 더블 다이아몬드 프로세스와 같은 디자인 과정을 소개하여, 실제 디자인 작업에서 어떻게 활용되는지에 대해 설명.


    아쉬웠던 점:
    • 딱히 없음
  • 알게 된 개념:
    • UX와 UI 디자인의 차이와 상호보완 관계: UX와 UI 디자인이 서로 상호보완적인 관계에 있다는 점. 이를 통해 사용자 경험을 개선하는 디자인 작업의 중요성.
    • 제품 디자이너와 UX/UI 디자이너의 역할: 각각의 역할과 조직 구조에 대해 이해.
    • 디자인 프로세스: 더블 다이아몬드 프로세스와 같은 디자인 과정을 통해, 디자인 작업이 어떻게 진행되는지에 대해 이해.

 

 
반응형

'디자인 > UX UI' 카테고리의 다른 글

컴포넌트 만들기 - 참고하면 좋을 웹사이트  (0) 2024.05.03
내가 생각하는 UX/UI 디자이너의 핵심 역량  (0) 2024.05.03
UX/UI 책 스터디 <사용자를 사로잡는 UX/UI 실전가이드> -2  (0) 2024.05.02
UX/UI 디자인 직무 채용공고 분석 (취업)  (1) 2024.04.30
UX/UI 기본용어 정리  (0) 2024.04.30

+ Recent posts

티스토리툴바