💡 25-05-08 (목)
이번 5월달 열심히 해보자
UI 구성 요소란
: 우리가 직접 눈으로 보고 클릭하는 모든것들
-> 사용자가 쉽고 직관적으로 제품을 사용할 수 있도록 도와주는 요소
▪️ 네비게이션 UI : 앱 전체 구조를 탐색할 수 있게 해주는 메뉴 구성
-> 사용자가 원하는 페이지로 갈 수 있도록 도와줌
(하단 - 홈, 보관함, 재생중 아이콘 / 상단 - 검색, 마이페이지)
▫️ 아이콘 + 텍스트 조합이 보편적
▫️ 현재 위치 강조 -> 컬러 다르게!
▪️ 버튼 UI : 사용자의 행동을 유도하는 요소
-> 확인, 재생, 좋아요, + 추가하기
▫️ 버튼마다 중요도에 따라 컬러를 구분짓는다
▪️ 인풋 UI : 사용자가 직접 텍스트나 값을 입력하는 영역
-> 검색창, 댓글창, 닉네임 입력
▪️ 카드 UI : 정보 콘텐츠를 카드형태로 나타낸다
-> 앨범 리스트, 뮤직카드
▫️ 이미지 + 텍스트(제목, 설명) 구성
▪️ 알림 UI : 사용자에게 중요한 알림(변화/정보/경고)을 알려주는 메시지
-> "저장되었습니다", "재생 실패", "좋아요가 추가됨"
▫️ 일반적으로 화면 상단이나 하단에 잠깐 떠서 사라짐 (Toast)
▫️ 색상으로 상태 구분 (성공/오류/정보 등)
▪️ 드롭다운 UI : 눌렀을 때 아래로 펼쳐지는 메뉴
-> 정렬 기준, 장르 선택, 언어 선택
▫️ 선택 항목이 많을 때 공간을 절약할 수 있어서 유용
좋은 UI
✔️ 사용자가 헷갈리지 않고 쉽게 사용 가능
✔️ 원하는 정보를 빠르게 찾을 수 있음
✔️ 클릭이나 조작이 직관적이고 편리함
✔️ 일관성, 직관성, 접근성, 피드백 제공이 중요
Auto layout
: 요소들을 일정한 규칙에 따라 자동으로 정렬하고 간격을 유지해주는 기능
-> 위치 간격 영역을 설정하는 것
반응형을 구현하기 위해 오토레이아웃을 필수로 사용한다 ❗
▶︎ 디바이스 크기가 바뀌거나 텍스트가 길어져도, 레이아웃이 유지되도록 도와줌
▶︎패딩값을 유지하면서 크기가 확대/축소 된다
간격 부분은 프레임 안에 있는 각각 요소들 사이를 뜻한다
패딩값은 프레임 안 여백값이다
⭐ 오토레이아웃 단축키 : shift + A ⭐
1️⃣ 텍스트로 버튼내의 글자 작성해주기
2️⃣ 오토레이아웃 적용하기 (shift + A)
3️⃣ 색깔 및 사이즈, 여백 적용해주기
4️⃣ 아이콘 추가해주기
✏️ 유튜브 뮤직앱 스크린 디자인하기
✔️ Shift + R : 룰러 생성 -> 그리드 표시
☑️ 아이콘은 가이드라인이 있어야 함
☑️ Fill은 프레임(부모)한테 주는게 아닌 요소(자식)한테 주는것이다
✅ Fill container: 안쪽 선택, Container(부모)를 채워줌
✅ Hug contents: 바깥쪽 선택, 콘텐츠를 Hug함 / 내부 자식들에 따라서 길이가 조정됨
➕
프레임 안에 있는 모든 것들의 수치를 맞춰줘야한다 (4,8배수)
프레임 안 요소들이 화면과 같이 늘어나려면 constraints - Left + Right 적용해준다
-> 늘어났을때의 모습을 생각하면 된다
‼️ '요소들이 위치하고 있는 절댓값으로부터 가까운 쪽 벽에 붙는다' 이렇게 생각하면 쉬움 !
✏️ 컬리 앱 디자인 하기
