📌
1. 텍스트 필드 (Text Field)
2. 검색 (Search)
🔗참고 :
https://m3.material.io/components/text-fields/overview
https://m3.material.io/components/search/overview
텍스트 필드 (Text Field)
사용자가 UI에 텍스트를 입력할 수 있도록 한다.
ex. 결제 정보 입력, 로그인
📐주의
사용자에게 상호작용 되고 있음을 보여줘야한다.
면으로 된 텍스트 필드 (Filled text filed) 와 아웃라인 텍스트 필드 (Outline text filed) 가 있다.
텍스트 필드의 상태(비어있는 상태, 입력 받은 상태, 에러 등)은 한 눈에 들어와야한다.
라벨과 에러 메세지는 짧고 추가 작업을 수행하는데 쉬워야한다.
주로 폼(form)과 다이얼로그에서 보여진다.
아웃라인 텍스트 필드
아웃라인 텍스트 필드는 면으로 된 텍스트 필드보다는 시각적 강조가 덜하기 때문에 여러개의 텍스트 필드가 함께 위치하고 있는 폼에 주로 배치되어 레이아웃을 정돈시킨다.
텍스트 필드 고르기
두 종류의 텍스트 필드는 같은 기능을 제공하기 때문에 스타일에 따라 적절히 사용한다.
📌
- 내가 작업하는 앱에서 효과적으로 기능하는가?
- 나의 UI의 목표를 수용하는가?
- 다른 컴포넌트나 주변의 컨텐츠에서 뚜렷하게 보이는가?
한 화면에서 두 종류 함께 사용하기
UI에서 둘 다 사용할 경우, 같은 공간에서 섞어서 사용하지 않고 각자 다른 섹션에서 일관적으로 사용되어야한다.
구성
- 컨테이너
주변 컨텐츠와 텍스트 필드 간의 차이를 만들기 위해 텍스트 필드의 컨테이너는 눈에 띄어야한다.
텍스트 필드 컨테이너는 색과 획을 가질 수 있고 색상과 획의 두께는 텍스트 필드가 활성화가 된 것을 보여줘야 할 때는 바뀌어야한다.
아웃라인 텍스트 필드의 컨테이너는 둥근 모서리를 가지고 있다.
면으로 된 텍스트 필드의 컨테이너는 상단의 둥근 모서리와 하단의 각진 모서리를 가진다.
- 라벨 텍스트 (텍스트 필드 내부에 위치)
사용자에게 어떤 정보가 필요한지 보여줘야한다. 모든 텍스트 필드는 라벨을 가져야한다.
라벨 텍스트는 인풋 텍스트와 함께 정렬되며 인풋 텍스트는 텍스트 필드의 중앙에 오거나 컨테이너의 상단 주변에 위치한다.
라벨 텍스트는 말줄임이 되거나 여러 줄로 구성되면 안 되고 간단 명료하고 한 눈에 보일 수 있어야한다.
- 인접 라벨 (텍스트 필드와 인접하여 위치)
필드의 목적이 인접 라벨에 나타나있다면 라벨 텍스트를 사용하지 않아도 된다.
텍스트 필드 컨테이너의 앞부분에 위치한다.
- 텍스트 표시
필드의 내용이 필수적으로 입력되어야한다면 별표 '*'를 라벨 텍스트 옆에 붙여준다.
대부분의 필드 값이 필수적이라면 ‘선택’이라는 용어를 라벨 텍스트 옆에 붙여준다.
필수 입력 값이 특정 색상을 가진다면, 그 색상은 별표에도 적용시켜야한다.
- 인풋 텍스트
사용자가 텍스트 필드 내부에 입력하는 텍스트를 의미한다.
여러 줄의 텍스트를 입력받았다면 컨테이너의 크기도 확장된다.
텍스트 필드보다 긴 텍스트를 입력 받았다면 자동으로 스크롤 할 수 있도록 한다.
긴 답변을 받는데 한 줄 텍스트 필드는 적합하지 않다.
- 앞에 오는 텍스트 (Prefix text)
환율 표시 같은 앞에 오는 텍스트가 포함될 수 있다.
- 뒤에 오는 텍스트 (Suffix text)
이메일 도메인이나 단위 같은 뒤에 오는 텍스트가 포함될 수 있다.
- 지지 텍스트 (Supporting text) 와 글자 계산기
지지 텍스트는 인풋 필드에 대한 추가적인 정보를 전달한다.
ex. 이 정보가 어떻게 사용될 지
한 줄로 이루어지고 필요하다면 여러줄을 포함할 수도 있다.
계속 보이거나 포커스를 받았을 때만 보일 수 있다.
글자 혹은 단어 계산기는 글자수가 제한되어 있다면 필요하다.
(사용자가 입력한 글자 수 / 전체 제한 글자 수)
- 에러 텍스트
비밀 번호 같이 입력값을 확인하는 경우, 에러 텍스트가 지지 텍스트를 대체할 수 있다.
에러 텍스트로 지지 텍스트를 변경하는 것은 레이아웃에 새로운 줄이 생기는 것을 방지하고 컨텐츠가 딱 들어맞을 수 있다.
한 개의 에러가 발생했다면 에러 텍스트는 에러를 해결하는 방법에 대해 이야기 해줘야한다.
여러개의 에러가 발생했다면 가장 많이 발생하는 에러를 해결하는 방법에 대해 말해준다.
만약 한 줄을 넘어갔다면 텍스트 필드 사이에 충분한 여백을 적용한다.
- 에러 아이콘
텍스트 필드에 에러가 발생했다면 에러 아이콘을 보여주는 것을 추천한다.
추가적인 표시를 보여줌으로써 사용자에게 한 번 더 에러에 대해 강조할 수 있다.
- 아이콘과 이미지
텍스트 필드의 아이콘은 선택적이다. 텍스트 필드 아이콘은 추가적인 입력 방법에 대해 (ex. 마이크 아이콘) , 추가적인 기능에 대해 (ex. 필드 입력값 지우기) 혹은 에러에 대해 말할 수 있다.
LTR 혹은 RTL 의 특성에 따라 위치가 바뀔 수 있다.
높이 24dp의 이미지가 텍스트 필드 내부에 위치할 수 있고 이 이미지는 상하 여백을 가질 수 있다. (ex. 카드 이미지)
- 읽기 전용 필드
사용자가 바꿀 수 없도록 미리 내용을 채워 보여준다.
일반 텍스트 필드와 함께 스타일이 적용될 수 있고 읽기 전용이라고 명확하게 표시한다.
반응형 레이아웃
화면 크기에 따라 사용자가 더 편하게 읽을 수 있도록 마진, 패딩, 컨테이너 크기가 레이아웃의 최소, 최대 크기값을 정한다. 고정값 대신 유동적인 값을 적용한다.
그 외 참고
밀접하게 위치한 텍스트 필드는 사용자가 한 눈에 볼 수 있고 많은 양의 정보에 대해 작업을 할 수 있도록 한다.
텍스트 필드에 대한 접근성 라벨은 텍스트 필드 라벨의 내용과 동일하다.
상호작용을 위한 아이콘이 포함되어있을 경우 접근성 라벨은 그것의 기능에 대해 설명한다.
ex. 비밀번호의 눈 아이콘 → 비밀번호가 보일 경우 : 비밀번호 숨기기
에러가 있는 경우 접근성 라벨의 역할에는 알림이 표시되고 텍스트 라벨에 에러 메세지가 표시된다.
검색 (Search)
사람들이 관련 정보를 얻기 위해 검색어나 문장을 입력하도록 한다.
사용자가 검색바 혹은 텍스트 필드에 내용을 입력하면 서치 뷰 (Search view)에서 관련 결과를 보여준다.
서치 바가 포커스된 상태라면 서치 뷰에서 변화하는 제안을 보여줄 수 있다.
구성
- 컨테이너
컨테이너는 컴포넌트 요소들을 포함한다.
서치바 컨테이너는 모서리가 둥글고 서치 뷰 컨테이너는 작은 크기의 화면에서는 화면을 다 덮는다.
- 아이콘과 아이콘 버튼
리딩 아이콘
검색 바의 왼쪽에 위치, 메뉴나 위로 올라가는 화살표 버튼 같이 방향을 잡을 수 있는 작업 포함한다. 혹은 검색 아이콘 (기능 x) 포함한다.
트레일링 아이콘
2가지 정도의 작업을 수행할 수 있는 아이콘이 바의 오른쪽에 위치한다.
이 작업들은 음성 검색같은 추가적인 검색 방법을 나타낼 수도 있다.
아니면 오버 플로우 메뉴 포함 (점 세개)
텍스트
- 검색어 힌트
사용자가 검색할만한 내용을 짧게 설명한다. - 인풋 텍스트
사용자가 타이핑을 시작하면 검색어 힌트가 인풋 텍스트를 대체한다. - 제안과 결과
간략하고 잘 정돈된 리스트에서 제안과 검색 결과를 보여준다.
- 구분선 (Divider)
관련 결과와 검색어 제안의 그룹을 분리하기 위해 사용
서치 바 (Seach Bar)
화면 상단에 위치하고 계속 그 자리에 위치한다.
검색 기능이 앱의 가장 중요한 작업이고 사용자의 눈에 가장 먼저 들어오도록 하고 싶을 때 사용한다.
ex. 챗 지피티
위치
서치 바는 대체 화면의 상단 중앙에 위치한다.
반응형 레이아웃
레이아웃의 크기가 변경될 때, 서치바의 위치와 정렬도 변경된다.
대부분의 경우, 레이아웃의 영역과 너비가 동일하게 유지되는 것을 추천한다.
내부의 요소들은 부모 컨테이너의 크기가 늘어남에 따라 왼쪽 오른쪽으로 이동한다.
사용자가 언제든 검색할 수 있도록 서치바는 컨텐츠와 가까이 위치시킨다.
행동
- 포커스
서치 바에 포커스가 될 경우, 검색 기록과 검색 제안을 보여주는 서치 뷰까지 확장된다.
서치 뷰에서 나오고 서치 바를 보이게 하려면 뒤로 가기 버튼을 클릭한다.
- 검색
사용자는 검색어를 입력하거나 제안으로 부터 선택을 할 수 있다.
리턴을 누르면 검색어가 제출된다. 검색 결과는 검색 바 하단에 표시된다.
- 스크롤
필요에 따라, 검색 바는 컨텐츠를 스크롤 할 때 안 보이거나 화면 상단에 고정된 채로 있을 수 있다.
서치 뷰(Search View)
검색 아이콘을 클릭했을 때 전체 화면으로 열리는 모달이다.
검색 기능이 앱의 주요 기능이 아닐 경우에 사용
반응형 레이아웃
서치 뷰는 작은 크기의 화면에서 전체 화면 모달이고 중간, 확장 크기의 화면에서는 서치바와 연결된 모달일 수도 있다.
레이아웃의 크기가 변화할 때, 서치 바의 위치, 정렬 방법 고려
행동
- 나타나기
검색 아이콘이나 상단의 서치 바를 클릭했을 경우, 서치 뷰 모달은 열린다.
- 검색
사용자가 검색어를 입력하면, 검색 기록과 제안이 검색 바의 밑에 보여진다.
제안을 클릭할 수도 있고 엔터 키를 눌러 검색을 수행한다.
결과는 서치 바 아래에 나타나고 아래로 스크롤 할 수 있다
검색 필드는 내용을 검색하고 있음을 보여주는 표시가 필요하다.
이 표시는 검색 아이콘이 될 수도 있고 ‘결과’와 같은 제목일 수도 있다.
결과를 표시할 때, 검색 입력 필드는 보이는 채로 남아있지만 포커스 된 상태는 아니다.
- 되돌아가기
화면 가장자리까지 확장되어있던 서치바는 작아진다.
이전 화면이 보인다.
그 외 참고
스크린 리더는 서치 바에서 자동으로 필드를 완성하면 알려줘야한다. 또한 자동완성된 검색 결과가 화면에 나타났음을 말해줘야한다.
입력 채움 값 (placeholder) 혹은 검색어 제안은 접근성 라벨에도 보여진다.
실습
📍만드는 방법
- 필요한 아이콘 생성
- 각자 텍스트 레이어 생성하고 필요한 아이콘을 복사해서 함께 선택 후 오토 레이아웃 적용
- 컴포넌트로 변경 후 텍스트, 토글 프로퍼티 적용
- 베리언츠 추가하여 풀 스크린, 모달 두가지 상태 만들어준다.
✨ 소감
일단 퀘스트에 나와있는 컴포넌트들을 정리하고 혼자서 만들어보았다. (뿌듯)
오늘로 사전캠프가 끝났는데 사전 캠프 기간동안 피그마 툴도 사용해볼 수 있었고 여러 컴포넌트에 대한 공부를 할 수 있어서 아주 유익한 시간이었다.
본 캠프에서 사전 캠프동안 배운 내용들을 적극 활용하고 싶고 지치지 않고 본 캠프를 잘 마무리 할 수 있었으면 좋겠다!
