ssoy_story

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

브레드 크럼(Breadcrumbs) 사이트 이동 경로라고 하며 사용자가 현재 어떤 위치에 있는지를 시각적으로 나타낸다. 토글(Toggle / Swich) 특정 기능을 켜고 끌 때 사용하며 주로 모바일에서 활용되며 스위치 와 많이 통용되고 있다, 튤팁(Tool Tip) 웹사이트에서 부연 설명을 사용되는 유용한 요소이며, 사용자가 개체 위에 포인트를 올려놓았을때 자용으로 표시된다. 텍스트 입력 필드 (Text Input Field) 앱 사용시 흔히 볼수 있는 키보드로 직접 텍스트를 입력하는 곳을 말한다. 플레이스 홀더(Placeholder) 사용자가 값을 입력하기 전에 도움을 줄 수 있는 힌트를 인풋 박스 안에 표시해주는 것을 말한다. 이때, 사용자가 값을 입력하면 문자는 사라진다. 플로팅 버튼 (Float..

1. 오토레이아웃(Auto layout) what: 컨텐츠에 따라 자유롭게 변형되는 프레임 why: 내부 내용 수정시 자동으로 사이즈 변경되서 편리함 when: 카드 ui, 버튼, 리스트 ui how: 두개의 객채 선택 또는 텍스트+ 레이아웃 선택 후 단축키: shift + A Design 채널에 Autolayout 생긴것을 볼수 있다. 1️⃣ 방향키: ↓ → 객체 정렬 방향, 세로로 또는 가로로 정렬할껀지 정하는것 2️⃣ 객체 간격: 묶은 객체들간의 간격 수치로 설정 3️⃣ 패딩 간격: 묶은 객체들의 테두리 패딩 설정 4️⃣ 패딩 상세 간격 또는 정렬: 묶은 객체들의 테두리 패딩 설정 ​ 2. 리사이징(Resizing) what: 오토레이아웃 생성시, 상위 프레임 크기 조정시 레이어가 어떻게 반응..

보호되어 있는 글입니다.