ssoy_story

보호되어 있는 글입니다.

더보기 📖 내가 선정한 웹/앱 서비스의 디자인을 클론(clone)해봅니다. 이를 통해 피그마 기초 실력 향상과, 좋은 UI/UX에 대한 이해를 갖출 수 있습니다. 선정했던 웹/앱 서비스에서 파트를 하나 선택한다. ex) 홈 화면, 결제, 장바구니 등등… 해당 화면들을 모두 캡쳐하고, 피그마에 이미지를 삽입합니다. 클론 디자인을 진행합니다. 클론이 완료된 후에는, 내가 생각하는 개선 아이디어를 반영해 Before / After 디자인을 진행해보자! 강의에서 배운 내용을 사용해봅시다. 자주 사용되는 부분은 컴포넌트로 만들어봅시다. 유저 플로우를 그려봅시다. 🗂 참고 아티클 [사용자 친화 웹] Figma로 KREAM 어플 클론하기 ▣ 클론 디자인 이란? 클론 디자인은 이미 존재하는 앱/웹 페이지를 동일하게 따..

오토레이아웃은 컨텐츠에 따라 자유롭게 변형되는 프레임으로 크기에 따라 사이즈가 유연하게 늘어나는 리사이징 기능을 제공한다. 단축키 : shift + a 해제 : ctrl + shift + g 자기만의 강점 형용사 5개 버튼 만들어보기 1. 제작할 강점 형용사의 텍스트를 작성 후 shift + a를 눌러 오토레이아웃을 적용해준다. 2. 텍스트 박스 클릭후 우츨 패널의 텍스트 Fill 값을 변경해준다. 3. 프레임도 선택 후 우측 패널의 Fill값을 넣어준다 [프레임 선택 후 단축키 I 스포이드로 색상 사용하기도 가능] 4. 둥굴기 999로 해준다. -> 리사이징 확인 한번 해주기 ! 5. 배경색이 채워진 버튼의 프레임 라운드값과 오토레이아웃의 좌우 위아래 패딩값을 조절해 원하는 모양으로 만들어준다. 6. ..

더보기 📖 자주 사용하는 웹/앱 서비스의 홈 화면 UI/UX 디자인을 분석하고, 개선이 필요한 부분에 대한 아이디어를 정리해보면서 UX/UI 적 사고를 넓혀봅시다. 자주 사용하는 웹/앱 서비스를 하나 선정합니다. 홈 화면 전체를 캡쳐합니다. 해당 화면의 UI/UX 디자인을 분석합니다. 화면 구성 클릭 시 동작 인상 깊은 UI/UX와 이유 용어 정리 / 아티클 스터디 에서 조사했던 내용을 참고해봅시다. 분석 내용을 기반으로 개선 아이디어를 정리해봅시다. 아이디어를 생각해봅니다. 아이디어에 대한 상세 내용을 와이어프레임 정도로 간단하게 표현해보는 것도 좋습니다. 🗂 참고 아티클마켓컬리 UX 뜯어보기 [UI/UX] Netflix의 UI [UI/UX] 마켓컬리 앱 분석 - (1) 스플래시부터 뷰티컬리까지 자주 ..