버튼 * 스타일 : 사이즈, 컬러, 쉐입 * 콘텐츠 : 심볼 아이콘, 텍스트라벨 * 역할 : 버튼의 의미론적 뜻을 확인하고, 외형에 형향을 주는 시스템 정의 장치 모범 사례 버튼이 즉각적으로 인지되고 이해하기 쉬울 때 앱이 직관적이고 잘 디자인 되었다고 느껴진다. - 사람들이 버튼을 사용하기 쉽도록 할 것 : 시각적으로 버튼을 구별할 수 있어야 한다. 버튼에 충분한 공간을 주어 사람들이 누르기 편하도록 한다. 일반적으로 버튼은 최소 44x44 크기를 가져야 한다. - 각 버튼의 기능을 명확히 나타낼 것 : 버튼은 항상 다음 액션을 예상할 수 있는 텍스트라벨 또는 심볼을 표시한다. 스타일 시스템 버튼은 내장된 인터랙션 상태, 접근성 지원, 외관 모형을 제공하면서 광범위의 커스터마이징을 지원하는 다양한 스타..

overview UI 디자인 파운데이션 정립, 컴포넌트제작 > 커머스 ui 디자인해보기 KPT 회고 KEEP - 컴포넌트 기능을 이전보다 자유롭게 사용할 수 있다. - 베리언츠 기능을 이해하고 사용할 수 있다. - 상하 스크롤, 픽스, 스티키, 캐러셀 프로토타입을 사용할 수 있다. - 폰트, 컬러 시스템을 정할 수 있다. PROBLEM - 레이아웃 구성 - 폰트 하이라이키 - 색상 강약 조절 - 체크박스 라벨 여백 크기 불일치 - 8pt 그리드 디자인 규칙을 따르지 못함 - 머터리얼 디자인, hig 등의 원칙을 따르지 못함 TRY - 컴포넌트 제작시 디자인 규칙(8pt)를 생각한다. - ui 클로닝으로 레아이웃 구성, 폰트 하이라이키, 색상 등 방법을 익힌다. - 머터리얼 디자인, hig를 바탕으로 아이..

Today I Learned [이번주 목표] 개인 과제 제출 + 피드백 받아서 수정 오늘 할 일 개인 학습 1. FACTS 있었던 일, 내가 한 일 피그마 활용 기초 강의 복습 - 디자인 규칙 세우기 구글 ux 강의 듣기 - 디자인씽킹 공감하기/정의하기 2. FEELINGS(느낌, 주관)나의 감정적인 반응, 느낌 - 디자인 규칙 세우는건 여전히 어렵다. 아직까지 디자인 기초가 다져지지 않아서 그런거겠지. UI 클로닝도 하고, 이번 커머스 홈페이지 제작 과제도 진행하는데 하나도 발전이 없는 기분이다. 계속 강의같은 걸로 누군가 나를 떠 먹여주었으면 좋겠다는 생각만 하고 있음. 역시나 안일함 - ux 강의를 들으면 들을수록 과연 내가 생각하고 만들어낼 서비스가 범용성이 있을까?라는 생각을 계속하게 된다. 강..

Today I Learned [이번주 목표] 개인과제 제출 피드백 디벨롭 오늘 할 일 개인과제 제출 1. 문제점 개인 과제 제출 하고 복습겸 다시 강의를 듣는데 디자인 규칙을 완전 잊고 과제를 한 것 같다. 2. 시행착오 디자인 규칙대로 다시 컴포넌트를 만들어봄. 그런데 이렇게 하면 화면 규격에 딱 맞아 떨어지지도 않고, 원하는 마진이나 패딩값을 주기가 어렵다. 그리고 4-8으로 떨어지는 짝수형 규칙을 만들어서, 홀수 프레임 375 와이드값에 어떤 기준으로 맞춰 넣어야 하지..? 3. 해결방법 해결했다면 어떻게 해결? 피그마 커뮤니티에서 다른 사람들이 만들어 놓은 것들을 몇개 둘러봤다. 그런데도 그 사람들 디자인 규격이 뭔지 잘 모르겠음 4. 알게 된 점 - 문제 해결 과정에서 느낀점, 새롭게 알게 된 ..

1. NH투자 주식 물타기 UIUX 아 너무 귀엽다 세상 트렌디한 uiux 옵션 같다 국내 주식 문화와 사람들을 잘 이해하고 풀어낸 것 같아서 감탄함 슬라이더바가 늘어나는 만큼 변하는 이미지까지 디테일 부분까지 놓치지 않음 누가봐도 직관적이고 도움이 되는 UIUX 이게 정말 그..NH? 2. Rabbit R1 데모 사용자가 가장 직관적으로 사용할 수 있도록 인터페이스를 줄인다는 래빗 내가 깔아 놓은 앱을 rabbit 포털에 연동 시키면, 내가 직접 앱을 열어서 탐색할 필요 없이 어레인지 해주는 비서 역할인 것 같음. 이렇게 모든 고민의 과정을 ai가 다 해주면 인간은 점점 사유하지 못하게 되는거 아닐까? 쓸데없는 고민과 결정은 없다고 생각하는데.. 일상 생활의 모든 고민과 사소한 갈등들이 없어지면 어떻게..

Today I Learned [이번주 목표] 개인과제 제출 및 피드백 바탕으로 개선하기 오늘 할 일 개인 필수 과제 마무리, 심화 과제 시작 1. 문제점 드래그로 왔다 갔다 하는 드래그 캐러셀 구현이 안 됨 심화 과제로 화면이 점점 더 복잡해지니까 미리 만들어놨던 컴포넌트 정리 규칙이 엉망이라는 것을 깨닫게 됨 2. 시행착오 드래그 캐러셀 - 유튜브, 피그마 커뮤니티 검색 3. 해결방법 해결했다면 어떻게 해결? 피그마 커뮤니티에 라이프 세이버가 있었음. on drag가 양옆으로 끼어 있는 순서는 캐러셀 프레임 자체를 선택하지 말고, 그 안에 있는 사진 자체에 on drag를 적용시키는 치트키를 쓰면 된다 컨포넌트 폴더 정리 및 정렬을 살짝 손 봄 4. 알게 된 점 - 문제 해결 과정에서 느낀점, 새롭게 ..