[TIL] 20231204

H.I.G (Human Interface Guidelines)

The HIG contains guidance and best practices that can help you design a great experience for any Apple platform.

HIG는 모든 애플 플랫폼을 위한 훌륭한 경험을 설계하는 데 도움이 될 수 있는 지침과 모범 사례가 포함합니다.

 

HIG 문서를 확인해야 하는 이유?

Apple의 플랫폼에 맞는 UI/UX를 유저에게 제공하기 위해!

HIG를 너무 심하게 위배한 앱의 경우 심사에서 리젝 당할 수 있음

아이폰 기본 앱 시계 UI/UX 분석

화면 1 - 알람 목록

Navigation bars (Components > Navigation and search > Navigation bars)

내비게이션 바는 창이나 화면 상단에 표시되어 사람들이 콘텐츠 계층 구조를 탐색하는 데 도움을 줍니다.

내비게이션 바는 사람들이 앱이나 게임에서 방향을 잡는 데 도움이 되는 제목을 표시할 수 있는 자연스러운 장소를 제공하며, 아래 콘텐츠에 영향을 미치는 컨트롤을 포함할 수도 있습니다.

앱에 사용한 이유 : 시계 앱에서는 편집, 알람 추가 등의 기능을 제공하기 위해 navigation bar를 사용

 

사용시 고려할 점

• 내비게이션 바는 사용자에게 앱의 제목 또는 화면의 현재 가이드를 제공하고, 아래 컨텐츠에 대한 컨트롤(CRUD)를 포함할 수 있습니다.
• 짧은 제목, 스크롤시 Hidden, 표준 뒤로가기 버튼, 충분한 여백 등을 지키는게 좋습니다.
• 내비게이션을 사용할때 연속적인 기능을 넣는다면 제목을 생략하는것이 일관성이 유지 됩니다.

Tab bars(Components > Navigation and search > Tab bars)

탭 표시줄은 표시줄 항목을 사용하여 동일한 보기에서 상호 배타적인 콘텐츠 창 사이를 탐색합니다.

앱에 사용한 이유 : 세계 시계, 알람, 스톱워치, 타이머 라는 독립된 콘텐츠 창을 제공하기 위해 tab bar 사용

 

사용시 고려할 점

• 사람들이 앱의 다른 영역으로 이동할 때(화면전환) 탭 표시줄이 보이는지 확인하세요.
• 사람들이 앱을 탐색하는 데 필요한 최소 탭 수를 사용하세요.
• 콘텐츠를 사용할 수 없는 경우에도 탭을 표시하세요.
  • 예를 들어, iOS 장치에 음악이 없더라도 음악 앱의 지금 듣기 탭은 계속 사용할 수 있으며 음악 다운로드에 대한 제안을 제공합니다. -> 컨텐츠가 없더라도 탭 자체를 삭제하는 것이 아니라 탭 내에 컨텐츠 없음을 표시 or 다른 제안 제공
• 각 탭 제목에 간결한 용어를 사용하세요.
• 눈에 띄지 않게 소통하려면 배지(흰색 텍스트와 숫자 또는 느낌표가 포함된 빨간색 타원)를 사용하세요.
  • 탭바에서 확인하지 않은 알람 개수 등을 추가적으로 표시할 수 있음(탭바 아이콘 오른쪽 상단에 표시)

TableView (Components > Layout and organization > Lists and tables)

목록과 테이블은 하나 이상의 행 열에 데이터를 제공합니다.

테이블이나 목록은 그룹이나 계층으로 구성된 데이터를 나타낼 수 있으며, 선택, 추가, 삭제 및 재정렬과 같은 사용자 상호 작용을 지원할 수 있습니다.

앱에서 사용한 이유 : 여러개의 알람 데이터를 메인화면에서 제공하는데 적합

 

사용시 고려할 점

• 목록이나 표에 텍스트를 표시하는 것을 선호한다.
• 말이 될 때 사람들이 테이블을 편집하게 하세요.
• 사람들이 목록 항목을 선택할 때 적절한 피드백을 제공하세요.

Toggles(= 토글 스위치) (Components > selection and input > Toggles)

토글을 사용하면 사람들은 각 상태를 나타내는 다른 모양을 사용하여 켜짐 및 꺼짐과 같은 한 쌍의 반대 상태 중에서 선택할 수 있습니다.

토글은 스위치와 체크박스와 같은 다양한 스타일을 가질 수 있으며, 다른 플랫폼은 이러한 스타일을 다른 방식으로 사용할 수 있습니다.

 

앱에서 사용한 이유 : 사용자가 쉽고 빠르게 알람을 활성화 or 비활성화 가능

 

사용시 고려할 점

• 토글을 사용하여 사람들이 콘텐츠의 상태나 견해에 영향을 미치는 두 가지 반대되는 가치 중에서 선택할 수 있도록 도와주세요
• 토글이 영향을 미치는 설정, 보기 또는 콘텐츠를 명확하게 식별하세요.
• 토글 상태의 시각적 차이가 분명한지 확인하세요. 색상이나 배경 등 식별할 수 있는 정보들을 활용하여 사람들이 차이를 인식할 수 있도록 합니다.

화면 전환

+버튼 클릭 -> modal 방식 화면전환 (Patterns > Modality 참고)

모달리티(modality)는 부모 뷰와의 상호 작용을 방지하고 거부하기 위한 명시적인 조치를 요구하는 별도의 전용 모드로 콘텐츠를 제시하는 설계 기법입니다.

 

기존의 플로우 혹은 상위 뷰와 연관되지 않는 독립된 작업을 하는 경우 modal 방식의 화면전환 사용

시계앱의 알람 탭의 경우 + 버튼을 눌러 새로운 알람을 추가하는 작업에서 모달 방식을 사용함. 메인 화면과 독립된 작업이기 때문에 modal 방식 사용

 

사용시 고려할 점

• 명확한 이점이 있는 경우에만 콘텐츠를 모달 방식으로 표시하세요.
  • 사람들이 집중하거나 콘텐츠나 장치에 영향을 미치는 선택을 하는 데 도움이 될 때만 모달 사용
• 모달 작업을 단순하고, 짧고, 능률적으로 유지하는 것을 목표로 하세요.
• 앱 내에서 앱처럼 느껴지는 모달 경험을 만들지 않도록 주의하세요.(모달에서 또 플로우를 만들지 않도록 주의)
  • 모달 작업에 하위 뷰가 포함되어야 하는 경우 계층 구조를 통해 단일 경로를 제공하고 사람들이 모달 뷰를 닫는 버튼으로 착각할 수 있는 버튼을 포함하지 마세요
• 심층적인 콘텐츠나 복잡한 작업에는 전체 화면 모달 스타일을 사용하는 것이 좋습니다.
• 항상 사람들에게 모달 뷰를 무시할 수 있는 명확한 방법을 제공하십시오.
• 필요한 경우 모달 보기를 닫기 전에 확인을 받아 데이터 손실을 방지할 수 있습니다.
• 모달 뷰의 작업을 쉽게 식별할 수 있도록 합니다.
• 다른 모달 뷰 위에 모달 뷰를 표시하지 마세요.

화면 2 - 알람 추가

Number pad (selection and input > virtual keyboards)

iOS, iPadOS, tvOS 및 VisionOS에서 시스템은 사용자가 데이터를 입력시

사용할 수 있는 다양한 유형의 가상 키보드를 제공합니다.

경우에 따라 앱의 데이터 입력 작업을 향상시키고 사용자 지정 기능을 제공하려는 경우 미리보기를 제공할수 있습니다.

앱에 사용한 이유 : 사용자가 입력 작업을 향상 시키기 위해서 제공함.

이후 업데이트 버전에서는 피커만 사용 (picker로 사용자의 정보 입력이 충분하기 때문에)

 

사용시 고려할 점

• 특수문자의 사용 여부에 따라 키보드 종류가 변경되어야한다.

Picker (selection and input > pickers)

picker는 사용자가 선택할 수 있는 케이스를 스크롤 가능한 목록으로 하나 이상 표시하고

선택시 사용자가 단일 또는 다중 값을 선택할 수 있도록 하여 정보 입력에 도움을 줍니다.

앱에 사용한 이유 : 사용자의 입력 데이터에 선택값(일정 범위 내의 입력) 을 주어 정보 입력에 도움을 주기 위해서

 

사용시 고려할 점

• 중간에서 긴 항목 목록을 제공할 때 피커를 사용해야합니다
• 규칙이 있는 정렬된 값을 사용해야합니다.
• 피커를 위해 뷰전환을 하면 안됩니다.
• 시간을 표시할때 분의 경우 1분 단위같이 더 적은 세분성을 제공해야합니다.

Tuist를 이용한 모듈화

Tuist를 이용해 테스트 앱 모듈화 성공!

이전에 모듈화를 해보다가 generate에서 에러가 나는 바람에 꼬여서 처음부터 다시 해서 성공했는데,,

아마 이전에 Projects.swift에서 의존성 설정을 잘못해서 잘 안된 것 같다….

Swift 파일에서 설정해준 것들이 Build Settings에 반영되는 것을 실제로 보니 신기했음!!!

Swift 파일로 프로젝트 설정 및 관리를 해줄 수 있다는 점이 확실히 장점인 것 같다.

(세팅 수정하고 싶은 경우 tuist edit으로 다시 열어서 Swift 파일을 수정해주면 되니까!)

 

오늘 알게 된 점:

Manifests 하위에 Workspace.swift 파일 생성해서 .xcworkspace 파일 생성 가능

generate 후 tuist graph 명령어로 의존성 그래프 생성 가능 (신기함..)

아키텍처 구조 파악 시 유용할듯! 내일은 외부 종속성 추가를 해보겠습니다!

 

 

새싹 수업 끝나고 집에 와서 추가로 새로운 것을 공부하기 + 코테 문제를 푸는 등 부족한 공부도 추가로 하려고 매일 노력은 하고 있는데

책상 앞에 앉기까지가 제법 힘드네요..