0 영 ZERO 零

선정 서비스: 에어비앤비

1. 반응형 디자인(Responsive Design)다양한 화면 크기(데스크탑 PC, 태블릿, 모바일)에 맞춰 UI가 자동 조정되는 디자인 방식동일한 콘텐츠를 디바이스별로 최적화하여 일관된 사용자 경험을 제공 브레이크 포인트(Break Point)화면 너비가 특정 지점에 도달했을 때 레이아웃 혹은 디자인 스타일이 변화하는 기준점콘텐츠 배치나 크기를 조절하기 위한 기준값디바이스 환경너비(px)모바일(세로)0 ~ 479px 미만모바일(가로)480px 이상 ~ 767px 미만태블릿(가로)768px 이상 ~ 1023px 미만데스크톱1024px 이상 2. 랜딩 페이지(Landing Page) 마케팅 목적을 위한 단일 페이지 설계. 사용자의 행동을 유도하는 CTA(Call to Action) 중심의 구조로 설계되며..

1. 앱 UI 디자인의 기본 원칙1. 사용자 중심 디자인(User-Centered Design) 디자인은 디자이너가 아닌 사용자에게 의미있어야 한다. 사용자의 목표, 행동, 감정을 깊이 이해하고 반영하는 게 핵심!미적 요소 2. 시각적 계층 구조(Visual Hierarchy) 사용자가 어디를 먼저 봐야 할지 자연스럽게 인식하게! 정보의 중요도에 따라 크기, 색상, 배치로 구분 / 강약 조절로 사용자 흐름을 매끄럽게 3. 일관성(Consistency) 한번 배운 사용방식이 앱 전체에 통용 버튼 스타일, 폰트, 색상, 아이콘의 의미 등이 앱 전체에서 일관성 있게 반복➡ 익숙함이 생겨야 사용자가 더 빠르고 편하게 앱을 사용한다 ✅ 앱에서 버튼을 누를 때 다른 화면의 버튼들과 같은 룰이 적용되는지 확인 2. ..

1, 피그마 플러그인(Figma Plugin)사용자의 작업을 도와주는 추가 기능/도구 📌 장점: 반복 작업 자동화, 디자인에 필요한 리소스를 빠르게 추가, 팀 협업 원활화 📑 추천 플러그인Unsplash :고퀄리티 무료 이미지를 디자인에 바로 삽입할 수 있죠.Iconify: 수천 개의 아이콘을 피그마에서 바로 불러와 사용할 수 있어요.Material design icons: google Material design 아이콘을 사용할 수 있는 플러그인3Dicons: 3D아이콘 제작Content Reel: 더미 텍스트 및 데이터 제공Lorem Ipsum: 더미 텍스트 제공Design Doc [Spectral]: 디자인 작업에 대한 문서화(documentation)를 도와줌Auto flow: 두 개 이상의 ..

1. 디자인 시스템 필수 개념디자인과 개발에 사용되는 일관된 컴포넌트, 가이드라인, 디자인 가치를 포괄하는 체계적인 구조➡ 레고 블록을 조합하여 어떤 집이든 자동차든 만들 수 있는 세트처럼, 레고 블록(컴포넌트)을 조립해서 디자인 시스템의 요소들을 조합해서 다양한 화면을 만들 수 있다.2. 디자인 시스템의 구조 ✅ Foundations디자인의 기본 언어. 브랜드 정체성과 감성을 결정짓는 요소들. ✅ Components기초 요소를 조합해 만들어진 재사용 가능한 UI 단위 ✅ Patterns여러 컴포넌트를 조합해 만든 사용자 흐름 중심의 디자인 (UX 문제 해결을 위한 구조화된 설계 방식, 사용자 흐름에 맞는 구성의 모범 사례 제공) ✅ Templates전체 페이지나 섹션의 구조. 보통 제품의 UX흐름을 시..

1. 디자인 시스템(Design System) 일관된 사용자 경험(UX)와 효율적인 사용자 인터페이스(UI)를 제공하기 위해 만들어진 재사용 가능한 디자인 원칙, 컴포넌트, 가이드라인의 집합. 디자인과 개발팀이 같은 언어로 일할 수 있게 해주는 공통 기준. 구글의 머터리얼 디자인, 애플의 휴먼 인터페이스 가이드라인 등을 선두로 기업들마다 고유의 디자인 시스템을 구축 📝 디자인 시스템의 필요성일관성 있는 사용자 경험 : 브랜드나 서비스를 접할 때 버튼 모양, 폰트, 인터렉션 등이 매번 달라지면 혼란을 야기. 디자인 시스템을 통해 모든 터치포인트에서 일관성 있는 경험을 제공해 신뢰를 형성.디자인 개발 효율성 향상 : 매번 새로 디자인하거나 개발할 필요가 없이 이미 정의된 컴포넌트의 재사용을 통해 효율 증가..

1. 그룹(Group)콘텐츠를 하나의 그룹으로 묶는 개념. 그룹화된 콘텐츠는 크기, 색상, 속성이 모두 같이 변경됨단축키 Ctrl+G / 해제 Ctrl+Shift+G 2. 프레임(Frame)레이아웃을 설정하고 반응형 디자인을 적용할 수 있는 컨테이너내부 콘텐츠의 속성이나 크기에는 영향X중첩이 가능하며 페이지, 카드 레이아웃 등에 사용단축키 F or A 3. 컴포넌트(Component)디자인에서 반복적으로 사용하는 요소를 하나로 묶어 재사용 가능하게 만든 디자인 템플릿 버튼, 아이콘, 카드 같은 UI 요소를 하나의 '기준 템플릿'으로 만들어 여러 화면에서 반복 사용 가능컴포넌트의 복사본(인스턴스)는 원본을 수정하면 자동으로 바뀌기 때문에 작업 속도 향상&디자인 일관성 유지 4. 컴포넌트와 인스턴스 컴포넌트..

1. UI 구성요소 UI 개념은 사용자가 디지털 제품과 상호작용하는 모든 화면요소. 즉, 우리가 웹사이트, 앱, 소프트웨어에서 직접 보고 클릭하는 모든 것! 네비게이션 UI : 사용자가 원하는 정보를 쉽게 찾을 수 있도록 도와주는 메뉴 / 탭바. 화면을 어떻게 돌아다녀야 할지 안내하는 길잡이.버튼 UI : 클릭하거나 터치하면 어떤 행동이 일어나게 만드는 요소. 화면 이동, 폼 제출, 팝업 열기 등 다양한 액션을 유도.인풋 UI : 사용자가 정보를 입력하거나 선택할 수 있게 만드는 요소. 텍스트 입력창, 체크박스, 라디오 버튼 등이 해당.카드 UI : 정보를 묶어서 보기 좋게 정리. 보통 이미지, 제목, 설명 같은 내용을 하나의 카드에 담아 전달.알림 UI : 사용자에게 시스템 상태나 피드백을 전달. 저장..

1. 피그마(Figma)프로그램 설치 없이 브라우저에서 실행 가능한 클라우드 기반 디자인 툴. 접근성이 매우 뛰어나고 실시간 협업이 가능하여 다인 동시 작업, 빠른 피드백을 통한 원활한 커뮤니케이션이 장점.주요 기능1. 화면 설계 (와이어프레임, UI 디자인, 프로토타이핑)2. 디자인 시스템 관리 (컴포넌트, 스타일)3. 실시간 협업 (코멘트, 버전 관리…)📌 용도: 웹/앱 인터페이스 디자인, 브랜드 디자인, 프로토타입 2. 피그잼(Figjam)온라인 협업 화이트보드 툴. 직관적으로 생각을 정리, 팀원과 시각적으로 아이디어 공유. 브레인스토밍, 플로우차트, 사용자 여정 지도 등을 쉽게 만들 수 있다. 주요 기능1. 마인드맵 (포스트잇, 도형, 텍스트 등)2. 간단한 플로우 차트, 사용자 여정 지도3. ..

1. 서비스 디자인 기획 1. 문제 발견 문제점 수집서비스 이용 방식에 따라 실제 사용자에게 영향을 미치는 서비스 경험과 페인 포인트(Pain Point)를 파악하여UX 디자인 관점으로 분석 본격적으로 사용자의 불편함, 문제점, 개선점 등을 정리 예) 자주 사용하는 메뉴나 버튼 중 헷갈리는 것 등 '왜' 불편했는지를 구체적으로 생각해보기, 나와 주변 사람들이 공감했던 문제들이 무엇인지 10~30개 정도의 이슈를 정리하여 문제점 수집📌 핵심 포인트 : 본인이 서비스를 이용할 때 발생하는 불편 지점 주제 선정수집한 문제점들에서 공통적인 부분을 찾아내거나 해결할 가치가 높은 요소들을 정해 주제를 선정예) 대중교통이나 식사와 관련된 주제와 같이, 일상적으로 항상 활용하는 스마트폰에서 활용할 수 있는 서비스를 ..