E민

01. 유저 리서치의 중요성 1) 유저 리서치란? 유저의 행동과 동기를 특정 맥락에서 조사하여 제품 혹은 서비스 개선에 유용한 인사이트를 얻는 활동 2) 유저 리서치의 중요성 📌 유저 리서치는 조직 내의 유저 이해도를 높이고 효율적인 커뮤니케이션을 도움 유저에 대한 이해도 강화 유저의 행동과 동기를 파악할 수 있음 해결해야 할 새로운 문제를 발견할 수 있음 효율적인 커뮤니케이션 도구 의사 결정의 근거를 마련할 수 있음 사전에 문제를 미리 발견하고 수정 비용을 절감할 수 있음 02. 유저 리서치 종류와 목적 1) 유저 리서치 종류 📌 더불어 비즈니스 관점에서 자사 서비스의 포지셔닝 전략을 수립하기 위한 데스크 리서치로 마켓 리서치, 경쟁사 분석이 주로 이루어짐 2) 유저 리서치 목적 정성적 리서치 📌 소수..

01. UX/UI 개념 이해 1) UX (User experience, 사용자 경험) : 유저가 제품이나 서비스와 상호작용하는 과정에서 얻는 모든 경험 2) UI (User Interface, 사용자 인터페이스) : 유저가 최종적으로 제품이나 서비스를 사용할 때 맞닿는 시각적 구성 요소 3) UX vs. UI 📌 UX 디자인은 유저의 관점에서 유저의 문제를 해결하는 것에 포커스, UI 디자인은 시각 언어의 규칙을 만드는 것에 포커스 - UX : 와이어프레임, 정보 구조도, 유저 리서치, 유저 페르소나, 사용성 테스트, 프로토타입, ... - UI : 컬러, 타이포그래피, 비주얼 디자인, 그래픽 디자인, 아이콘, 디자인 시스템, ... 02. UX/UI 디자인 프로세스 1) 더블 다이아몬드 모형 : 더블 ..

01. 프로토타입의 개념 1. 프로토타입의 뜻 프로토타입(Proto-type)의 원래 뜻은 시제품 디지털 제품에선 실제 제품을 만들지 않고 아이디어를 테스트해볼 수 있는 것 구현하는 정도에 따라 낮은 단계와 높은 단계로 나눌 수 있음 프로토타입을 만들거나 또는 프로토타입을 사용해 테스트하는 것을 프로토타이핑이라고 함 2. 프로토타입을 만드는 이유 1) 실제 제품을 만들지 않고 아이디어를 검증해 볼 수 있음 2) 팀 구성원들과 시각적인 결과물로 소통할 수 있음 3) 부족하거나 놓친 부분을 확인할 수 있음 02. 피그마 프로토타입 소개 1. 피그마 프로토타입 피그마에서 디자인한 화면들을 바로 실제 작동하는 형태로 테스트해 볼 수 있는 유용한 기능 📌 프로토타이핑 툴 프로토타입은 피그마 고유의 기능이 아님 프..

01. 모달 1. 합성 컴포넌트와 컨테이너 컴포넌트 컴포넌트들은 대부분 파운데이션 요소들을 모아 만듦 - 그런데, 파운데이션 요소만으로는 만들 수 없고, 컴포넌트를 모아 또 컴포넌트를 만드는 경우가 있음 - 버튼은 이미 컴포넌트인데, 버튼 컴포넌트에 폰트 스타일, 컬러 스타일, 여백 및 간격, 곡률 등이 합쳐져 다시 컴포넌트가 되어 있음 => 다이얼로그 이런 컴포넌트들을 **합성 컴포넌트(Compound Component)**라고 부름 합성 컴포넌트는 대부분 버튼 컴포넌트에 파운데이션 또는 컴포넌트가 여러개 합쳐진 형태 이런 합성 컴포넌트들은 대부분 특정한 맥락을 담고 있기 때문에, 컨테이너 컴포넌트라고도 부름 컨테이너 컴포넌트에는 바텀시트, 다이얼로그, 리스트, 카드 등 복잡한 구조의 컴포넌트들이 있음..

01. 컴포넌트 1. 컴포넌트의 개념 피그마 한정) 컴포넌트는 컨버스 위의 모든 개체 (맥락에 따라 다르게 해석) 즉, 디자인에서 컴포넌트는 파운데이션의 조합을 쌓고 쌓아 만들어지는 구성품 2. 컴포넌트를 분석, 비교할 때 유의할 점 * 컴포넌트의 모양이 아니라 기능이 중요한 이유 -> 분명히 버튼마다 모양도, 색상도 다른데 우리는 같은 버튼으로 인식 Q. 모양도, 색상도 다르지만 모두 ‘버튼’이라고 받아들이는 이유가 무엇일까? -> 버튼의 생김새가 아니라 버튼이 하는 일을 기준으로 생각하기 때문 => UI를 비교하고 공부할 때는 UI의 목적, UI의 기능에 초점을 둬야 함 3. 컴포넌트의 종류 1) 액션 : 사용자가 중요한 행동을 수행할 때 사용 2) 인풋 : 사용자의 입력을 받을 때 사용 3) 인포메..

플러그인에서 고른 색상을 복사해서, 피그마에 사각형을 만들고 각각 배경색으로 넣어 주세요. 각각의 사각형을 10개씩 복제해 주세요. 포인트 컬러 사각형을 눌러서, 색상 피커를 열어 주세요. 💡 명도를 10단계로 나눠볼 거예요. 색상 피커에서 HEX 눌러, 색상 코드를 HSL로 바꿔 주세요 💡 HSL은 Hue(색조), Saturation(채도), Lightness(밝기)로 색을 구분하는 방법이에요. 포인트 컬러 사각형의 L값이 얼마인지 확인해주세요. 🧔🏻 제가 고른 색은 L(밝기)가 47이네요! L값을 기준으로 10씩 빼거나 더해서 사각형들의 색상을 맞춰 주세요 💡 제가 고른 색상을 기준으로, 밝기를 10씩 줄이거나 늘려서 자연스럽게 밝고 어두워지는 색상을 만들 거예요! 🧔🏻 제가 고른 값은 L이 47이므..

01. 디자인이 코드로 변환되는 과정 1. 디자인을 코드로 변환 2. 코드는 디자인을 레고처럼 쌓음 - 코드는 기본적으로 네모난 박스 영역을 만듦 (박스모델이라고 부름) 3. 웹과 앱은 코드를 읽고, 디자인으로 다시 바꿔서 화면에 보여줌 - UI를 설계할 때는 코드로 변환할 수 있는 구조로 만들어야 함 02. 프레임과 그룹 1. 프레임 Frame 피그마에서 코드 블록을 만드는 기능이자, 실제 화면으로 인식하는 개체 - 프레임은 디자인을 코드로 바꿀 때 개발이 가능한 코드 블록으로 만들어짐 - 박스 모델의 박스 하나하나가 피그마에서 프레임이라는 기능으로 구현되는 셈 - 프레임은 다른 개체나 프레임을 넣을 수 있기 때문에, **컨테이너(Container)**라고도 부름 2. 그룹 Greop 여러 개체를 하나..

1. 피그마 소개 1) 피그마 툴 소개 📌 뛰어난 디자인 협업 툴 피그마는 강력한 디자인 툴이자, 와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 할 수 있는 효율적인 툴 💡제품 제작 과정 - 제품을 만들 때는 크게 기획 → 디자인 → 개발 → 테스트 및 출시의 과정 - 이 모든 과정을 피그마 하나로 활용 가능 2) 피그마의 특징 - 언제나 어디서나 웹에서도 사용할 수 있어 접근성이 좋고, 맥과 윈도우 모두 사용 - 디자인부터 개발까지 올인원 디자이너부터 개발자까지 아우르는 종합 협업 툴 (절반은 디자인 기능, 절반은 개발 관련 기능) - 강력한 커뮤니티 풍부한 커뮤니티 자료 (커뮤니티 내 각종 플러그인과 디자인 자료) - 쉬운 학습 다른 툴들과 사용 방법이 유사해 금방 배울 수 있음, 디자인 기초부..