Text Field, Search Bar, 실습 4&배민 클론 디자인 (TIL 5일차)

주요 컴포넌트 카테고리

• Actions /액션: 버튼(Button), 플로팅 액션 버튼(FAB)
• Communication /인포메이션: 스낵바(Snackbar), 토스트 메시지
• Containment /컨테이너: 카드(Card), 다이얼로그(Dialog)
• Navigation /내비게이션: 탭(Tab), 네비게이션 바(Navigation Bar)
• Selection /컨트롤: 체크박스(Checkbox), 라디오 버튼(Radio Button)
• Text inputs /인풋: 텍스트 필드(Text Field), 검색 바(Search Bar)

1. Text inputs

 1-1. Text field(텍스트 필드)

• UI에 텍스트를 입력할 수 있도록 함
• 상호작용 가능한 요소처럼 보이도록 해야함
• 라벨과 오류 메시지는 간결하게
• 텍스트 필드는 주로 forms와 dialog에서 사용

1)필드 2)아웃라인

텍스트 필드의 구성 요소. 서포팅 텍스트와 아이콘 요소는 선택 사용

fiied 텍스트 필드의 패딩값

1.아이콘 없는 경우

높이 56, 좌우 패딩 16 / 인풋과 라벨 텍스트 동시 존재하는 경우 위아래 패딩 8

2. 아이콘 있는 경우

아이콘 있는 쪽 패딩 12, 아이콘-텍스트 간 패딩 16

3.서포팅 텍스트

좌우 16, 서포팅 텍스트와 컨테이너 간 4, 텍스트와 캐릭터 카운터 간 패딩 16

                                      +)캐릭터 카운터는 사용된 문자 수와 총 문자 수 제한을 표시

 

 

outline 텍스트 필드의 패딩값

1.아이콘 없는 경우

좌우 16, 상단 라벨 텍스트와 윤곽선 4, 컨테이너 안으로 들어오는 라벨 8dp

2. 아이콘 있는 경우

아이콘 있는 쪽 패딩 12, 아이콘-텍스트 간 패딩 16

3.서포팅 텍스트

좌우 16, 서포팅 텍스트와 컨테이너 간 4, 텍스트와 캐릭터 카운터 간 패딩 16

outlined은 filled보다 시각적 강조가 적어, 여러 개가 함께 배치되는 경우 레이아웃을 보다 정돈되게 보이도록 도와준다!

 

혼합해서 사용할 경우 서로 다른 섹션에서 사용해야함

다중 줄 필드와 다르게 텍스트 영역은 텍스트 필드보다 높아서 더 긴 응답이 권장된다는 것이 보여줌

서포팅 텍스트<->오류 텍스트로 교체/ 텍스트 필드 간 충분한 패딩

                                    +)텍스트 필드가 오류 상태일 때는 아이콘 사용을 강력 권장!

 

----이후 피그마 실습

 

⭐주말에 실습4를 진행해서 중요하다고 생각한 부분만 다시 복기하는 식으로 정리해둠!

 

1.스크롤 관련

스크롤 관련 설정은 이 레벨에서만 수정 가능

• 프레임
• 메인 컴포넌트

그래서 인스턴스인 상태라면 디태치해주면 fixed값을 적용할 수 있다! 그 전엔 fixed는 불가능

(인스턴스 상태에서 앱바를 고정하려고 해서 애를 먹었다;;)

 

2.이미지 드래그 프로토타이핑

이미지 드래그 프로토타이핑

이미지를 가로 배치해놓고 호라이즌 스크롤 하면 쉽게 슬라이드 처리할 수 있겠지만, 이미지가 하나씩 보여지는 형태로 프로토타이핑을 하고 싶어서 관련 튜토리얼 영상을 찾아보았다.

 

1.오토레이아웃으로 묶은 상태에서(이때 gap이 0) 3개를 복사

2.순서대로 이미지 크기대로 프레임 조정

3.드래그 인터렉션으로 서로 이어주면 완성

 

단, 3번 이미지에서 1번으로 돌아갈 때 휘리릭 돌아가긴 한다 (무한 루프를 하려면 더 복잡한 방법을 써야하는데 간단히 끝내고 싶어서 이 방법을 사용했다...)

 

3.드롭다운 메뉴 프로토타이핑

사실 예제에는 다른 드롭다운 모양이 있었던 것 같은데(왼쪽 사진의 경우) 근데 내가 처음부터 만들고 싶어서 새로 만들었다...

 

1.세브론 아이콘을 뒤집어서 메뉴 on/off 베리언트를 만들고

   (인스턴스로 만들어도 문제는 없을 듯. 근데 나는 세브론 아이콘만 쓰니까 간단하게 하나로 진행)

2.두번째 베리언트 세트에는 메뉴가 열린 모습을 만들어서 베리언트를 추가했다.

   (이때 메뉴가 닫힌 모습은 Option 항목을 Value 값 컴포넌트에 위쪽 정렬을 맞추고 레이어 눈을 꺼놓았다. 아마 자연스러운 애니메이션을 위해서 아닐까 싶다.)

 

두 번째 사진은 3단계로 만들었는데 다시 생각해보니 2번째 베리언트에서 텍스트 프로퍼티를 주면 되니까 따로 만들지 않아도 될 듯. 첫 번째 사진과 동일한 방법으로 만들어주면 된다. 원본 예제의 텍스트 간격에 맞춰서 패딩 값을 임의로 조정했다...

화면 프레임 안에 넣은 것. 이런식으로 오토레이아웃을 묶고 그리드에 맞춰서 패딩값을 줬다.

 

온보딩 실습을 마치고 배민 메인화면을 모작해보기로 했다!

엄청 간단한 카드형식인데...

막상 만들어보니 무언가 잘못되었다...정렬이 딱딱 되지않았다...

저 이미지 프레임 부분을 크기를 맞추려고 하다보니까 개별 인스턴스의 크기가 달라진 거였다.(오른쪽 사진)

(이미지 프레임 크기는 동일하나, 라벨 텍스트가 늘어남에 따라 컨테이너와 이미지 프레임 사이에 공간이 생김)

챗지비티에게 물어보고... 해결!

패딩은 프레임의 안쪽 여백만 정의하는 거라서 내부 콘텐츠만 줄어드는 거고 프레임 크기는 안 줄어든다는 걸 까먹고 있었다(다시 생각해보면 너무 당연한 얘기ㅠㅠ)

 

정리해서 보자면...

 

[ 카드(Auto Layout, 고정 크기) ]
 ├─ [ 아이콘 컨테이너(Auto Layout) ] ← 여기에 패딩값을 주면 된다!
 │    └─ 이미지 프레임(사각형)
 └─ 라벨(Text)

 

-----------내가 했던 짓(잘못된 경우)

[ 카드(Auto Layout, 고정 크기) ]
 ├─ [ 이미지 프레임(사각형) (Auto Layout) ] ← 여기에 패딩값을 줘서 아무리해도 안 줄어들었던 것
 └─ 라벨(Text)

주소는 임의의 주소로 설정했다

아무튼 최대한 오토레이아웃 활용하면서 만들어가는중....

버튼 아이콘 인스턴트 설정이 갑자기 안되어서 다시 복습해야겠다...ㅠㅠ

이번주 내로 완성해서 튜터님께 피드백받는 게 목표!!