1. 시스템 머티리얼을 적절히 활용해야 한다

Apple은 iOS, macOS, iPadOS 등에서 기본적으로 제공하는 시스템 머티리얼을 활용할 것을 권장한다.

기본적인 머티리얼은 반투명(Translucency), 블러(Blur), 그림자(Shadow) 등의 효과를 통해 시각적인 깊이감을 제공한다. 앱에서 불필요한 시각적 장식을 추가하는 대신, 시스템에서 제공하는 효과를 최대한 활용하는 것이 좋다.

2. 반투명(Translucency)과 흐림 효과(Blur)를 적절히 사용해야 한다

반투명과 블러 효과는 콘텐츠 간 계층 구조를 강조하고, 시각적으로 자연스러운 깊이감을 만든다. 배경을 적당히 흐리게 하면, 사용자는 현재 포커스가 어디에 있는지 쉽게 이해할 수 있다. iOS/macOS의 기본 머티리얼을 그대로 사용하면, 플랫폼의 일관성을 유지할 수 있다. 너무 강한 블러 효과는 오히려 가독성을 해칠 수 있으므로, 적절한 강도를 조절해야 한다.

3. 배경과 조화를 이루는 머티리얼을 선택해야 한다

머티리얼은 앱의 디자인과 자연스럽게 어우러져야 한다. Light Mode와 Dark Mode에 맞춰 다른 머티리얼을 적용하는 것이 중요하다. 배경이 너무 복잡하면 블러 효과가 지나치게 도드라져서 가독성을 방해할 수 있다. 필요한 경우 대비(Contrast)를 조정하여 중요한 콘텐츠가 눈에 띄도록 조절한다.

4. 맥락(Context)에 따라 적절한 머티리얼을 적용해야 한다

머티리얼이 적용되는 위치와 역할에 따라 적절한 효과를 선택해야 한다. 컨텍스트 메뉴, 팝업, 시트(Sheet) 등은 반투명 머티리얼을 사용하여 화면과 자연스럽게 어우러지도록 한다. 특정 영역(예: 네비게이션 바, 툴바)에는 적당한 블러를 적용하여 콘텐츠와 구분되면서도 일체감을 유지할 수 있도록 한다. 배경과의 차이를 강조해야 하는 경우, 더 두꺼운 블러(Thick/Ultra Thick)를 적용할 수도 있다.

5. 다크 모드(Dark Mode)에서 적절한 대비를 유지해야 한다

다크 모드에서는 블러 효과가 너무 강하면 가독성이 떨어질 수 있다.

다크 모드에서는 조금 더 불투명한(Thicker) 머티리얼을 사용하여 대비를 높이는 것이 좋다.

반대로, 밝은 모드에서는 더 얇은(Thinner) 머티리얼을 사용하여 가벼운 느낌을 줄 수 있다. 배경이 너무 어두우면 블러 효과가 잘 보이지 않으므로, 적절한 밝기의 배경을 유지해야 한다.

6. 생동감 있는 효과를 추가하여 자연스러운 사용자 경험을 제공해야 한다

Apple은 움직임(Motion)과 반응(Feedback)이 자연스럽게 이어지는 디자인을 추천한다.

예를 들어, 스크롤할 때 블러 효과가 자연스럽게 변화하도록 애니메이션을 적용할 수 있다. 사용자의 터치/클릭에 따라 미묘한 반응을 주면 인터랙션이 더욱 직관적으로 느껴진다.

7. 과도한 시각적 효과는 피해야 한다

머티리얼 효과를 너무 과하게 사용하면 오히려 UI가 복잡해지고 사용성이 떨어질 수 있다.

필수적인 요소에만 블러와 반투명을 적용하고, 필요하지 않은 곳에서는 단순한 머티리얼을 사용하는 것이 좋다. 애니메이션이 너무 많으면 성능에 영향을 미칠 수 있으므로, 효율적인 렌더링을 고려해야 한다. 사용자가 iOS의 Reduce Transparency(투명도 줄이기) 설정을 활성화한 경우, 머티리얼 효과를 최소화해야 한다.

Apple의 머티리얼 가이드는 UI 요소에 깊이감과 자연스러운 흐름을 제공하는 방법을 설명한다.

1.시스템 머티리얼을 활용하여 플랫폼 일관성을 유지하고, 2.반투명과 블러 효과를 적절히 적용하며, 3.배경과 조화를 이루는 머티리얼을 선택해야 한다. 또한, 4.맥락에 따라 적절한 머티리얼을 사용하고, 5.다크 모드에서도 가독성을 유지하며, 6.자연스러운 애니메이션과 반응을 추가하는 것이 중요하다. 7.과도한 효과는 피하고, 꼭 필요한 곳에만 사용해야 한다.

이 가이드를 따르면 더 직관적이고 세련된 사용자 경험을 제공할 수 있는 UI를 만들 수 있다.

1. 모든 사용자를 고려한 디자인을 해야 한다

사용자는 연령, 신체 능력, 문화, 환경 등 다양한 배경을 가지고 있다. 앱이 특정 그룹만을 대상으로 하지 않도록 해야 한다.

다양한 사용 사례를 고려해야 한다. 저시력자, 색약(색맹)을 가진 사용자, 청각 장애가 있는 사용자 등 다양한 사용자의 경험을 테스트하고 반영한다. 나이, 성별, 문화적 차이를 배려한 디자인이 중요하다. 예를 들어, 특정 국가에서 사용하는 색상이 다른 의미로 받아들여질 수도 있다.

2. 접근성을 최우선으로 해야 한다

장애가 있는 사용자도 불편함 없이 앱을 사용할 수 있어야 한다. Apple은 이를 위해 VoiceOver, Dynamic Type, 색상 반전, 모션 줄이기 등의 접근성 기능을 제공한다.

콘텐츠는 명확하고 쉽게 이해할 수 있어야 한다.

중요한 정보를 색상에만 의존하지 않고, 텍스트, 아이콘, 패턴 등을 활용해 추가적인 구별 방법을 제공해야 한다.

화면 판독기(Screen Reader)에 최적화해야 한다. 버튼, 링크, 이미지 등의 UI 요소에는 적절한 라벨(Label)을 제공하여 VoiceOver 사용자가 쉽게 이해할 수 있도록 한다.

사용자가 직접 인터페이스를 조정할 수 있도록 해야 한다. Dynamic Type을 지원하여 사용자가 텍스트 크기를 조절할 수 있도록 하고, 설정된 환경에 따라 UI가 조정되도록 만든다.

3. 색상과 대비(Contrast)는 모든 사용자가 인식할 수 있도록 조정해야 한다

색상은 앱의 분위기를 결정하는 중요한 요소지만, 모든 사람이 동일하게 인식하는 것은 아니다.

색맹(색각 이상) 사용자를 고려해야 한다. 예를 들어, 빨간색과 초록색을 구별하기 어려운 사용자도 있기 때문에, 색상만으로 정보를 전달하지 않고 추가적인 요소(아이콘, 패턴 등)를 함께 사용해야 한다. 충분한 대비를 유지해야 한다. 텍스트와 배경색 간 대비가 낮으면 읽기 어려워질 수 있다. Apple은 WCAG(Web Content Accessibility Guidelines) 기준을 준수할 것을 권장한다.

4. 유연한 인터랙션 방식을 제공해야 한다

모든 사용자가 같은 방식으로 앱을 조작할 수 있는 것은 아니다. 다양한 입력 방식을 지원해야 한다.

터치 외에도 보조 입력 방식을 지원해야 한다. Apple의 접근성 기능 중 스위치 컨트롤(Switch Control), 음성 명령(Voice Control), 키보드 내비게이션 등을 활용하는 사용자를 고려해야 한다. 작은 터치 타겟을 피하고, 충분한 여백을 확보해야 한다. 손 떨림이 있는 사용자도 쉽게 조작할 수 있도록 버튼 크기를 키우고, 클릭 가능한 요소들의 간격을 넓게 설정한다.

5. 사용자 경험을 개인화할 수 있도록 해야 한다

모든 사용자가 같은 방식으로 앱을 이용하는 것은 아니므로, 개인 맞춤형 설정을 지원하는 것이 중요하다.

사용자가 자신의 환경에 맞게 앱을 조정할 수 있도록 한다. 예를 들어, iOS의 Reduce Motion(모션 줄이기) 설정을 적용한 사용자는 과한 애니메이션 없이 사용할 수 있어야 한다. 다양한 언어와 문화권에서도 자연스럽게 사용할 수 있도록 한다. 다국어 지원이 필요할 경우, 번역된 텍스트가 UI에 잘 맞도록 조정해야 한다. 숫자, 날짜 형식, 읽는 방향(LTR/RTL) 등도 문화에 따라 다를 수 있으므로, 이를 고려하여 UI를 설계해야 한다.

6. 명확한 피드백을 제공해야 한다

사용자가 현재 앱에서 어떤 상태에 있는지 명확하게 이해할 수 있어야 한다.

애니메이션, 음성, 진동 등 다양한 피드백 방식을 활용한다. 예를 들어, 실수로 버튼을 눌렀을 때 경고 메시지와 함께 가벼운 진동을 주면, 사용자가 즉시 피드백을 받을 수 있다. 텍스트 기반의 설명도 함께 제공해야 한다. 예를 들어, 단순히 아이콘만 표시하는 것이 아니라, 상황에 따라 ‘저장되었습니다’ 같은 문구를 함께 제공하면 더 명확한 피드백이 된다.

7. 환경적 요인을 고려해야 한다

사용자는 조용한 실내뿐만 아니라, 햇빛이 강한 야외나 시끄러운 환경에서도 앱을 사용할 수 있다.

주변 소음이 많은 환경에서도 사용할 수 있도록 해야 한다. 오디오 안내가 필요한 경우, 자막이나 시각적인 피드백도 함께 제공한다. 밝은 환경에서도 가독성을 유지해야 한다. 다크 모드(Dark Mode)와 라이트 모드(Light Mode)를 지원하여 다양한 조명 환경에서도 편하게 사용할 수 있도록 한다.

Apple의 포용성 가이드는 모든 사용자가 편리하게 앱을 이용할 수 있도록 설계하는 것이 핵심이다.

1. 다양한 사용자층을 고려한 디자인을 적용하고,
2. 접근성을 최우선으로 반영하며,
3. 색상과 대비를 조정하여 누구나 쉽게 인식할 수 있도록 해야 한다. 또한,
4. 다양한 입력 방식을 지원하고,
5. 사용자가 환경을 개인화할 수 있도록 설정을 제공하며,
6. 명확한 피드백을 통해 직관적인 경험을 제공해야 한다.
7. 사용 환경을 고려한 UI 설계도 필수적이다.

이 가이드를 따르면 보다 모든 사람이 차별 없이 사용할 수 있는 포용적인 앱을 만들 수 있다.

그중 레이아웃(Layout) 은 화면을 구성할 때 고려해야 할 기본적인 요소들을 다루고 있으며, 가독성, 일관성, 접근성 등을 높이기 위한 다양한 원칙을 포함하고 있다.

1. 일관된 구조와 흐름을 유지해야 한다

레이아웃이 직관적이고 예측 가능할수록 사용자가 빠르게 적응할 수 있다.

기존 플랫폼의 패턴을 따르는 것이 중요하다. 사용자는 iOS, macOS 등에서 자주 접하는 인터페이스에 익숙하기 때문에, 무조건 창의적인 디자인을 시도하기보다는 기본적인 구조를 유지하는 것이 좋다. 비슷한 기능을 하는 요소들은 일관된 위치에 배치하여 예측 가능하도록 구성한다. 텍스트, 이미지, 버튼 등의 정렬(Alignment)을 통일하면 더욱 깔끔하고 정돈된 인상을 줄 수 있다.

2. 가독성과 접근성을 고려해야 한다

디자인이 아무리 멋져도 가독성이 떨어지면 사용자 경험이 나빠진다.

적절한 폰트 크기와 대비(Contrast)를 유지해야 한다. Apple은 Dynamic Type을 활용하여 사용자가 텍스트 크기를 조절할 수 있도록 지원할 것을 권장한다. 충분한 대비를 제공하여 어두운 배경에 밝은 텍스트 또는 밝은 배경에 어두운 텍스트가 잘 보이도록 한다. 요소 간 간격(Spacing)을 충분히 확보해야 한다. 텍스트 블록 간 간격이 너무 좁으면 읽기 어려워지고, 너무 넓으면 연결성이 떨어진다.

3. 반응형 디자인을 고려해야 한다

모든 Apple 기기의 화면 크기와 방향(세로/가로 모드)에 따라 UI가 자연스럽게 조정될 수 있어야 한다.

iOS와 iPadOS에서는 Auto Layout을 활용하여 요소들이 화면 크기에 맞춰 자동으로 배치되도록 한다. 가변 그리드 시스템(Flexible Grid)을 사용하여 요소들을 정렬하고 크기를 조정한다. macOS 앱은 창 크기를 조절할 수 있기 때문에 가변적인 레이아웃을 지원하는 것이 필수다.

4. 시각적 계층 구조(Visual Hierarchy)를 명확히 해야 한다

중요한 정보는 더 눈에 띄게 배치하고, 부가적인 내용은 시각적으로 덜 강조해야 한다.

타이포그래피(Typography)와 컬러(Color)를 활용하여 중요도를 구분한다. 제목은 굵게, 중요한 정보는 대비가 높은 색상으로 표시하면 효과적이다. 여백(Margin)과 패딩(Padding)을 적절히 조정하여 요소들 간의 관계를 나타낸다. 관련된 요소들은 더 가까이 배치하고, 서로 다른 그룹은 여백을 더 둬서 구분한다. 사용자가 자연스럽게 정보를 읽을 수 있도록 레이아웃을 설계한다. 서구권 사용자의 경우 왼쪽에서 오른쪽, 위에서 아래로 읽는 흐름을 따르므로, 중요한 요소를 왼쪽 상단에 배치하는 것이 효과적이다.

5. 안전 영역(Safe Area)을 준수해야 한다

iPhone의 노치(Notch), Dynamic Island, 홈 인디케이터(Home Indicator)와 같은 시스템 UI 요소로 인해 콘텐츠가 가려지지 않도록 해야 한다.

safeAreaLayoutGuide를 사용하여 UI 요소들이 안전한 영역 안에 배치되도록 조정한다. 테두리에 너무 가까이 배치된 콘텐츠는 가독성이 떨어질 수 있으므로, 일정한 마진을 유지해야 한다.

6. 터치 인터페이스를 고려해야 한다

스마트폰과 태블릿에서는 터치로 조작하기 때문에 클릭이 아닌 ‘터치’ 환경에 최적화된 UI가 필요하다.

터치 타겟 크기는 최소 44×44pt 이상이어야 한다. 버튼이나 인터랙션 요소가 너무 작으면 오작동이 발생할 가능성이 크다. 손가락이 닿을 공간을 충분히 확보해야 한다. 버튼이 너무 붙어 있으면 실수로 잘못 터치할 가능성이 높다. 제스처(Gesture)를 활용하되, 필수적인 기능은 버튼으로 제공한다. 예를 들어, 좌우 스와이프로 삭제할 수 있는 기능이 있더라도 삭제 버튼을 제공하는 것이 접근성을 높이는 방법이다.

7. 적절한 애니메이션과 피드백을 제공해야 한다

애니메이션은 사용자 경험을 향상시키지만, 과하면 오히려 혼란을 줄 수 있다.

애니메이션은 자연스럽고 직관적으로 보여야 한다. 예를 들어, 화면 전환 시 ‘밀려나가는 효과’가 있으면 사용자가 흐름을 더 쉽게 이해할 수 있다. 불필요한 모션을 피해야 한다. 과한 애니메이션은 사용자 경험을 해칠 수 있으며, 특히 ‘Reduce Motion(모션 줄이기)’ 기능을 활성화한 사용자를 위해 대체 UI를 제공해야 한다.

정리 Apple의 레이아웃 가이드는 사용자가 직관적으로 앱을 이용할 수 있도록 돕는 중요한 원칙들을 담고 있다.

1. 일관된 구조를 유지하고,
2. 가독성과 접근성을 고려하며,
3. 반응형 UI를 지원하고,
4. 시각적 계층 구조를 명확히 해야 한다. 또한,
5. 안전 영역을 준수하고,
6. 터치 인터페이스에 최적화된 디자인을 적용하며,
7. 자연스러운 애니메이션과 피드백을 제공하는 것이 핵심이다.

이 가이드라인을 따르면 Apple 플랫폼에서 더 나은 사용자 경험을 제공할 수 있다.

• 앱과 게임은 사용자가 선택할 수 있는 항목과 동작을 이해하도록 돕기 위해 간단한 아이콘을 사용함.

• 앱 아이콘은 음영, 텍스처, 하이라이트 등으로 풍부한 시각적 세부사항을 사용하지만, 인터페이스 아이콘은 간소화된 모양과 색상으로 아이디어를 전달함.

2. 인터페이스 아이콘 디자인

• 인터페이스 아이콘은 SF Symbols앱에서 선택하거나 사용자화할 수 있음.

• 검은색과 투명색을 사용하여 모양을 정의하며, 시스템은 검은색 영역에 다른 색상을 적용함.

3. 모범 사례

• 간소화된 디자인: 세부사항이 많으면 이해하기 어려움. 간단하고 친숙한 디자인을 사용해야 함.

• 시각적 일관성 유지: 모든 아이콘은 일관된 크기, 세부 정보, 선 두께를 가져야 함.

• 선 굵기 조정: 아이콘과 주변 텍스트의 굵기를 맞추어 일관된 모양을 유지함.

4. 패딩과 정렬

• 패딩 추가: 사용자 설정 아이콘에 패딩을 추가하여 시각적 정렬을 이루어야 함.

• 비대칭 아이콘 조정: 비대칭 아이콘은 시각적으로 중앙 정렬되도록 위치를 조정해야 함.

5. 선택 상태 아이콘

• 선택 상태 버전 제공: 필요한 경우에만 인터페이스 아이콘의 선택 상태 버전을 제공해야 함.

• iOS와 macOS에서 선택된 아이콘에 강조 색상이나 배경 모양을 적용함.

6. 포용성 있는 디자인

• 포용성 고려: 특정 성별을 표시하지 않으면서 모든 사람이 이해할 수 있는 아이콘을 디자인해야 함.

7. 텍스트 포함

• 텍스트 사용 제한: 의미 전달에 꼭 필요한 경우에만 텍스트를 포함해야 함.

8. 벡터 포맷 사용

• 벡터 포맷 사용: 사용자 설정 인터페이스 아이콘은 PDF 또는 SVG와 같은 벡터 포맷을 사용해야 함.

9. 대체 텍스트 레이블

• 대체 텍스트 제공: 시각적으로 표시되지 않지만 VoiceOver가 내용을 설명할 수 있도록 대체 텍스트 레이블을 제공해야 함.

10. Apple 하드웨어 사용 금지

• 하드웨어 모형 사용 금지: Apple 하드웨어 제품의 모형을 사용하지 말아야 함.

11. macOS 문서 아이콘

• 문서 아이콘 디자인: 사용자 설정 문서 유형을 나타내는 아이콘을 생성할 수 있음.

• 간단한 이미지 사용: 문서 유형을 명백하게 나타내는 간단한 이미지를 디자인해야 함.

12. 문서 아이콘의 크기

• 작은 크기에서 복잡성 줄이기: 작은 크기 버전에서 아이콘의 복잡성을 줄여야 함.

13. 여백 정의

• 여백 정의: 이미지 캔버스의 약 10%에 해당하는 여백을 정의하고, 이미지의 대부분을 여백의 경계 안쪽에 포함해야 함.

14. 문서 유형 설명

• 간결한 용어 사용: 문서 유형을 파악하는 데 도움이 되는 간결한 용어를 지정해야 함.

1. 해상도 개요

• 다양한 기기는 각기 다른 해상도로 이미지를 표시함.
• 포인트는 시각 콘텐츠의 일관성을 유지하는 추상적인 측정 단위임. 2D 플랫폼에서 포인트는 디스플레이 해상도에 따라 달라질 수 있는 픽셀 수에 매핑됨.
• 비트맵 이미지를 생성할 때 크기 조절 비율_을 지정하여 해상도를 결정함. 예를 들어, 크기 조절 비율1(@1x)은 1:1 픽셀 밀도를 나타내며, 고 해상도디스플레이는 2:1(@2x) 또는 3:1(@3x)과 같은 더 높은 픽셀 밀도를 가짐.

2. 이미지 크기 조절 비율

• 모든 지원 기기에 앱의 모든 비트맵 이미지에 대한 고 해상도애셋을 제공해야 함.

• 크기 조절 비율에 따라 파일 이름에 ‘@1x’, ‘@2x’ 또는 ‘@3x’를 추가하여 식별함.

• 각 플랫폼에 대한 크기 조절 비율은 다음과 같음: iPadOS, watchOS: @2x iOS: @2x 및 @3x visionOS: @2x 이상 macOS, tvOS: @1x 및 @2x

3. 이미지 포맷

• 다양한 유형의 이미지를 생성할 때 다음 권장 사항을 고려해야 함.
• 이미지 유형에 따른 포맷:

비트맵 또는 래스터 작업물: 인터레이스 미적용 PNG파일 전체 24비트 색상이 필요 없는 PNG그래픽: 8비트 색상 팔레트 사진: JPEG파일 또는 HEIC 파일 고 해상도크기 조절이 필요한 플랫 아이콘: PDF 또는 SVG 파일

4. 이미지 모범 사례

• 각각의 이미지에 색상 프로필을 포함해야 함. 이는 다양한 디스플레이에서 색상이 의도대로 표시되도록 돕는 역할을 함.

• 항상 다양한 실제 기기에서 이미지를 테스트해야 함. 디자인 시점에서 올바르게 표시되던 이미지가 다양한 기기에서 다르게 보일 수 있음.

5. 플랫폼 고려 사항

iOS, iPadOS 또는 macOS에 대한 추가 고려 사항은 없음.

8. watchOS 관련

이미지 파일을 작게 유지하기 위해 투명도 사용을 지양해야 함.

모든 화면 크기에 대해 단일 애셋을 제공하려면 자동 크기 조절 PDF를 사용해야 함.

화면 크기에 따른 이미지 크기 조절 비율은 다음과 같음: 38mm: 90% 40mm: 100% 41mm: 106% 42mm: 100% 44mm: 110% 45mm: 119% 49mm: 119%

1. 다크 모드 개요

• 다크 모드는 iOS, iPadOS, macOS 및 tvOS에서 기본 인터페이스 스타일로 설정할 수 있음.

• 이 모드에서는 어두운 색상의 팔레트를 사용하여 콘텐츠를 강조하고, 더 높은 대비를 제공함.

2. 모범 사례

• 앱에서만 사용하는 화면 모드 설정을 제공하지 말 것. 사용자가 두 번 이상 설정을 조정해야 하므로 불편함이 증가함.

• 두 화면 모드 모두에서 앱이 잘 표시되도록 할 것. 사용자가 ‘자동’ 설정을 선택할 경우, 앱이 실행 중일 때 모드가 전환될 수 있음.

• 콘텐츠의 가독성을 테스트할 것. 다크 모드에서 어두운 배경에 어두운 텍스트는 가독성이 떨어질 수 있음.

• 특정 상황에서 다크 모드만 사용하는 것을 고려할 것. 몰입감 있는 미디어 시청을 지원하는 앱에서는 다크 모드가 적합할 수 있음.

3. 다크 모드 색상

• 다크 모드의 색상 팔레트는 어두운 배경과 밝은 전경 색상을 포함함.

• 현재 화면 모드에 맞춰 조정되는 색상을 사용해야 함. 사용자 설정 색상은 Xcode에서 밝은 버전과 어두운 버전을 지정해야 함.

• 모든 화면 모드에서 충분한 색상 대비를 사용해야 함. 최소 색상 간의 대비율은 4.5:1 이상이어야 하며, 작은 텍스트는 7:1을 권장함.

• 흰색 배경 색상의 명도를 낮출 것. 흰색 배경이 다크 모드항목 사이에서 눈에 띄지 않도록 이미지를 어둡게 조정할 수 있음.

4. 아이콘 및 이미지

• 가능하면 SF Symbols를 사용해야 함. 이 아이콘은 두 화면 모드에서 잘 표시됨.

• 라이트 모드와 다크 모드의 아이콘을 별도로 디자인할 것. 예를 들어, 보름달 아이콘은 배경에 따라 윤곽선이 필요할 수 있음.

• 풀컬러 이미지와 아이콘이 두 화면 모드 모두에서 잘 표시되는지 확인할 것. 애셋이 한 모드에서만 잘 표시되면 수정하거나 별도로 생성해야 함.

5. 텍스트

• 시스템 제공 레이블 색상을 사용해야 함. 1차, 2차 레이블 색상은 자동으로 조정됨.

• 시스템 보기를 사용하여 텍스트 필드와 텍스트 보기를 그릴 것. 시스템 제공 보기를 사용하면 모든 배경에서 텍스트가 잘 표시됨.

6. 플랫폼 고려 사항

• iOS, iPadOS에서는 시스템 배경 색상을 사용하는 것이 좋음. 다크 모드에서는 배경 색상이 자동으로 조정되어 시각적 구별을 제공함.

• macOS에서는 사용자 설정 구성요소 배경에 약간의 투명도를 포함할 것. 투명도를 추가하면 데스크탑 색조 조정이 활성화될 수 있음.

7. 리소스

관련 콘텐츠 및 비디오 링크가 제공됨.

UXUI 디자인을 공부하는 학생입니다.

오늘은 Apple의 Human Interface Guidelines(HIG)에서 가장 기본이 되는 네 가지 영역을 스터디 준비를 위해 정리해보았습니다.

1. 접근성 (Accessibility)

"7명 중 1명은 디지털 기기를 사용하는 데 어려움을 겪고 있어요. 접근성은 모든 사용자를 위한 기본 중의 기본입니다."

1.1. 접근성의 기본 원칙

쉽게 사용할 수 있게 만들기 (단순성)

• 복잡한 기능도 쉽게 사용할 수 있도록 구현하기
• 누구나 직관적으로 이해할 수 있는 인터페이스
• 일관된 사용자 경험 제공

여러 방법으로 인지할 수 있게 하기

• 보고, 듣고, 만지는 등 다양한 방법으로 정보 전달
• 명확한 피드백 제공
• 실수하지 않도록 도와주는 디자인

1.2. 접근성 기능 구현하기

VoiceOver 지원 예시

// 버튼에 음성 설명 추가하기
button.accessibilityLabel = "프로필 사진 업로드"
button.accessibilityHint = "갤러리에서 사진을 선택할 수 있어요"

// 복잡한 화면 요소도 쉽게 이해할 수 있게
customView.isAccessibilityElement = true
customView.accessibilityLabel = "프로필 정보"
customView.accessibilityTraits = .header

터치하기 쉽게 만들기

// 버튼을 충분히 크게 만들기
extension UIButton {
    func setMinimumTouchArea() {
        let minSize = CGSize(width: 44, height: 44) // 최소 44x44 크기
        let buttonSize = bounds.size
        let widthPadding = max(minSize.width - buttonSize.width, 0)
        let heightPadding = max(minSize.height - buttonSize.height, 0)

        hitTestInsets = UIEdgeInsets(
            top: -heightPadding/2,
            left: -widthPadding/2,
            bottom: -heightPadding/2,
            right: -widthPadding/2
        )
    }
}

글자 크기 조절 지원

// 사용자가 설정한 글자 크기에 맞추기
class CustomLabel: UILabel {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupDynamicText()
    }

    private func setupDynamicText() {
        adjustsFontForContentSizeCategory = true
        font = UIFont.preferredFont(forTextStyle: .body)
    }
}

2. 앱 아이콘 (App Icon)

"첫인상이 중요하듯이, 앱 아이콘은 우리 앱의 얼굴입니다."

2.1. 앱 아이콘 디자인 원칙

단순하고 기억에 남게 만들기

• 핵심적인 요소만 넣기
• 한눈에 알아볼 수 있는 독특한 모양
• 다양한 크기에서도 잘 보이는 디자인

그래픽 요소 활용하기

✅ 이렇게 하면 좋아요:

• 간단하고 굵은 그래픽
• 앱의 기능을 잘 보여주는 심볼
• 브랜드 특징 잘 살리기

❌ 이렇게 하면 안돼요:

• 복잡한 사진 사용
• 글자 너무 많이 넣기
• 시스템 UI 요소 그대로 복사하기

2.2. 앱 아이콘 크기 가이드

struct AppIconSizes {
    // iOS/iPadOS용 크기
    static let appStore = "1024x1024 픽셀"
    static let iPhone = "180x180 픽셀 (@3x)"
    static let iPad = "167x167 픽셀 (@2x)"

    // macOS용 크기
    struct MacOS {
        static let appStore = "1024x1024 픽셀"
        static let dock = "128x128 픽셀"
        static let finder = "32x32 픽셀"
    }

    // Apple Watch용 크기
    struct WatchOS {
        static let appStore = "1024x1024 픽셀"
        static let home = "80x80 픽셀 (@2x)"
    }
}

2.3. 앱 아이콘 구현하기

다른 아이콘으로 바꾸기

// 앱 아이콘 변경 기능 구현
class IconChanger {
    static func changeIcon(to iconName: String?) {
        guard UIApplication.shared.supportsAlternateIcons else { 
            print("이 기기는 아이콘 변경을 지원하지 않아요 😢")
            return 
        }

        UIApplication.shared.setAlternateIcon(iconName) { error in
            if let error = error {
                print("아이콘 변경 실패: \(error.localizedDescription)")
            } else {
                print("아이콘이 성공적으로 변경되었어요! 🎉")
            }
        }
    }
}

3. 브랜딩 (Branding)

"우리 앱의 특별한 개성을 보여주되, Apple의 플랫폼 특성도 잘 지켜야 해요!"

3.1. 브랜드 전략 짜기

기본 규칙

• Apple 플랫폼의 기본 규칙 지키기
• 브랜드만의 특징을 일관되게 보여주기
• 사용자 경험이 최우선!

브랜드 요소 적용하기

// 브랜드 색상 정의하기
extension UIColor {
   static let brandMain = UIColor(named: "BrandMain")
   static let brandSub = UIColor(named: "BrandSub")

   // 다크모드에서도 잘 보이게
   static let brandBackground = UIColor { mode in
       switch mode.userInterfaceStyle {
       case .dark:
           return UIColor(named: "BrandBackgroundDark")!
       default:
           return UIColor(named: "BrandBackgroundLight")!
       }
   }
}

3.2. 브랜드 폰트 사용하기

// 브랜드 폰트 설정
extension UIFont {
    static func brandFont(size: CGFloat) -> UIFont {
        // 브랜드 폰트가 없다면 시스템 폰트 사용
        return UIFont(name: "BrandFont-Regular", size: size) ?? 
               .systemFont(ofSize: size)
    }
}

4. 색상 (Color)

""색상은 단순한 꾸미기가 아닌, 의미를 전달하는 중요한 수단이에요!"

4.1. 시스템 컬러 활용하기

기본 컬러 사용법

class CustomView: UIView {
    func setupColors() {
        // 기본 배경색
        backgroundColor = .systemBackground

        // 강조색
        tintColor = .systemBlue

        // 구분선 색상
        layer.borderColor = UIColor.separator.cgColor
    }
}

4.2. 접근성 고려한 색상 사용

색상 대비 확인하기

// 색상 대비 체크 함수
func isColorContrastGood(text: UIColor, background: UIColor) -> Bool {
    let ratio = calculateContrastRatio(text, background)
    // WCAG 2.0 기준
    let minimumRatio: CGFloat = 4.5

    return ratio >= minimumRatio
}

다크모드 대응하기

// 다크모드용 색상 정의
extension UIColor {
    static let customBackground = UIColor { mode in
        switch mode.userInterfaceStyle {
        case .dark:
            return .systemGray6
        default:
            return .white
        }
    }

    static let customText = UIColor { mode in
        switch mode.userInterfaceStyle {
        case .dark:
            return .white
        default:
            return .black
        }
    }
}

🎯 디자인 체크리스트

접근성 체크

• VoiceOver 텍스트 확인
• 글자 크기 조절 테스트
• 색상 대비 검사
• 터치 영역 크기 확인

앱 아이콘 체크

• 모든 크기 제공
• 심플하고 기억나는 디자인
• 다크모드에서 확인

브랜딩 체크

• 일관된 브랜드 요소 사용
• 플랫폼 특성 준수
• 사용자 경험 우선

색상 체크

• 시스템 컬러 활용
• 다크모드 대응
• 접근성 고려

📚 공부하면서 알게된 점

1. 접근성은 선택이 아닌 필수. 모든 사용자를 고려해야 함.
2. 앱 아이콘은 우리 앱의 첫인상이니 신중하게 디자인 해야 함.
3. 브랜딩은 Apple 플랫폼의 특성을 해치지 않는 선에서 해야 함.
4. 색상은 단순히 예쁘게만 하는 게 아니라, 의미 전달도 중요.

🔍 참고자료

• Apple HIG 공식 문서
• 애플 개발자 문서
• WWDC 영상

자주 벨로그에 코딩테스트를 풀고 풀이를 남기자가 목표였는데 요 몇일 자잘하게 일들이 있었다.

티는 안나는데 꼭 해야하고 생각보다 신경을 꽤 써야하는 그런 일들.. 하........

그래도 마음속의 숙제는 몇 개 해결한 기분이라 나쁘진 않다.

어쩌겠나. 현생도 살아야지! ㅠㅠ

아무튼, 자바스크립트 코딩테스트 문제를 풀어보았다.

프로그래머스 0단계 문자열 반복해서 출력하기

▶ 🗒️문제

문자열 str과 정수 n이 주어집니다. str이 n번 반복된 문자열을 만들어 출력하는 코드를 작성해 보세요.

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    str = input[0];
    n = Number(input[1]);
});

제한사항 1 ≤ str의 길이 ≤ 10 1 ≤ n ≤ 5

입출력 예

입력 #1 string 5

출력 #1 stringstringstringstringstring

(반복학습의 중요성)

다만, 출력을 봤을때 string을 5번 반복해서 나오게 해야 한다는 것인데.

str은 문자열, n은 숫자. 반복되어야 하는 숫자이므로...

뭔가 함수가 있을 것 같은데... 하는 생각이 계속 들었지만

지금 내가 뭘 알겠는가. 0단계 푸는 자바스크립트린이 인데..ㅋㅋ

자바에 익숙한 나는 for문을 먼저 생각 해 봤다.

let result = '';
for (let i = 0; i < n; i++) {
    result += str;
}

사실 이것도 for문 좀 까먹어서 쓰느라 생각하는 시간을 가졌다.. 반성.

중간 중간 애매하게 틀려서 계속 틀렸었다가 맞았었는데, 다른 사람 풀이를 보다가 유레카 외치는 함수를 알게됐다..

REPEAT..... 반복........ 이걸 사용하면

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    str = input[0];
    n = Number(input[1]);
    console.log(str.repeat(n))
});

참나. 세상 편하게 한줄로 해결 할 수 있는 것이다. 이게 기본으로 들어가있다니 그것도 이게 뭔가 하는 단어도 아니고 걸음마 떼고있는 나도 한번에 보자마자 이해했다. 이걸 쓴 사람도 천재고, 머리 한대 맞은 느낌이였다. 물론 정답을 만드는 방법은 정말 많다. 다른 사람의 풀이를 보면서 공부하는게 꽤 큰 것 같다.

그나저나 오늘의 repeat 함수는 절대 잊지 않을 것 같다 당분간이라도..

기본으로 탑재해주셔서 감사...

나에게 코딩테스트는 날 테스트 하는 것 보다, 차근차근 공부하는 기분이다. 그래서 힘들거나 그렇진 않다.

매번 새로운 함수를 알아내가고 있어서 신기하다..

그래도 아직 0단계니까 이렇게 느낄 수 있겠지 ㅋㅋㅋ

자잘자잘한 현생의 일이 있어도 그래도 굳이 굳이 신경을 내서 한문제씩은 루틴마냥 풀어야 한다. 풀고싶다. 슬로우 스타터라도 한 발자국 씩 100일 걸으면 100걸음이 될 것 아닌가. 배워서 남주는 건 없다. 작심삼일로 돌아가는 일은 없도록 노력해보자. 나는 할 수 있다.

프로그래머스 0단계 자바스크립트 a와 b 출력하기

▶ 🗒️문제

정수 a와 b가 주어집니다. 각 수를 입력받아 입출력 예와 같은 형식으로 출력하는 코드를 작성해 보세요.

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    console.log(Number(input[0]) + Number(input[1]));
});

제한사항 -100,000 ≤ a, b ≤ 100,000

입출력 예

입력 #1 4 5

출력 #1 a = 4 b = 5

음 일단 첫줄 코드부터 어제와 매우 흡사하다.

어제 내가 썼던 걸 복습하며 문제풀이를 해보자.

자바에서는 import 키워드를 사용해 scanner 클래스를 불러오지만,

자바스크립트는 Node.js에서는 require() 함수를 사용하고, Node.js의 기본 모듈인 readline을 가져온다. const readline = 부분은 불러온 모듈을 readline이라는 상수에 저장한다고 했다.

예시로 비교하자면

Java 환경은

JDK (Java Development Kit) ├── 컴파일러 (javac) ├── JRE (Java Runtime Environment) └── JVM (Java Virtual Machine)

JavaScript 환경은

Node.js ├── V8 엔진 (Chrome의 JavaScript 엔진) ├── npm (패키지 관리자) └── 기본 모듈들 (fs, http 등)

이렇게 볼 수 있다.

• 둘 다 코드 실행을 위한 필수 환경을 제공
• 둘 다 설치 필요
• 둘 다 각자의 패키지 관리 시스템이 있음

Java: Maven/Gradle Node.js: npm

차이점은

차이점:

JDK: Java 전용 Node.js: JavaScript 실행 + 추가 기능들

이렇다고 한다. 내가 이해하기로는 자바스크립트의 코드를 실행하기 위해 필요한 드라이버라고 이해했다.

결론적으로는,

• JavaScript는 Node.js가 없어도 브라우저에서 실행 가능
• 하지만 파일 입출력, 콘솔 입력 등을 위해서는 Node.js가 필요
• 코딩테스트에서는 주로 Node.js 환경을 사용하므로 require()가 필요

터미널에서 npm run serve, npm 어쩌고 저쩌고.. 한 구문들 엄청 썼으면서..^^.. 참 부끄럽다. 근데 뭐 어쩌겠나 헷갈리면 이해하고 넘어가야지. 아는척이 더 웃기다.

암튼 옆으로 좀 빠졌는데, 다시 문제를 보면

이번에 새로 본 건 input = line.split(' '); 이 부분이다.

split 함수는

문자열을 주어진 문자열 구분자나 정규식을 기준으로 나누어 배열로 변환하는 함수라고 한다. 꽤 다양하고 쓰이는 방법이 많아서 링크를 남겨놓아야 겠다. 자바스크립트 split 함수 사용법

console.log(Number(input[0]) + Number(input[1]));

이렇게 되어있는데, 원하는 출력값은 a = 4 b = 5

이렇게 나와야 하니, 더하는 계산식이 아웃풋이 아니라, 보여지는 아웃풋이 되어야 한다.

여기서 방법은 두가지가 있는데, 일반문자열 방식과 템플릿 리터럴 방식이다. 일반 문자열 방식을 써도 답은 맞다. 하지만 템플릿 리터럴 방식이 더 많이 쓰이고 ES6에 새로 도입된 문자열 표기법이다. 또한 더 편하고 많은 걸 할 수 있다.

• 문자열 안에 변수나 표현식을 쉽게 넣을 수 있게 해주는 방식
• 백틱(`) 기호로 감싸서 사용
• ${} 안에 변수나 표현식을 넣을 수 있음

암튼 처음 답변에

console.log(a = ${input[0]}, b = ${input[1]} );

이렇게 썼는데 틀렸다고 나왔다. 왜냐면 저렇게 코드를 쓰면 a = 4 b = 5 이렇게 나온다. 아하하하하하

그래서 각각 따로 나눠서 썼다.

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = line.split(' ');
}).on('close', function () {
    console.log(`a = ${input[0]}`); // 여기가
    console.log(`b = ${input[1]}`); // 정답존
});

이렇게 쓰니까 정답이 되었다.

다른사람의 풀이 방법도 보니,

console.log(`a = ${input[0]}\nb = ${input[1]}`)

이렇게 중간에 \n을 넣어서 띄어쓰기를 하는 방법도 있더라. 오호?

오늘은 split함수 쓰는 법 배웠다! 한발짝 더 걸었다!

자바스크립트 실력 향상을 위해 코딩테스트를 씹고 뜯고 맛보며 남기는 글.

슬로우스타터인 나지만 그래도 가만히 있진 않겠다.

단계가 낮으면 어떠한가. 부끄럽고 창피하다고 남들이 푼다고, 나에겐 어려운 문제를 어버버하고 이해 한 척 하며 넘어가는것보단 훨씬 낫다! 모르면 알면 되는거야.

프로그래머스 0단계 자바스크립트 문자열 출력하기

▶ 🗒️문제

문자열 str이 주어질 때, str을 출력하는 코드를 작성해 보세요.

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

let input = [];

rl.on('line', function (line) {
    input = [line];
}).on('close',function(){
    str = input[0];
});

제한 사항 1 ≤ str의 길이 ≤ 1,000,000 str에는 공백이 없으며, 첫째 줄에 한 줄로만 주어집니다.

그래서 나에게 익숙한 자바 문법으로 변환하면서 이해를 시도 해 봤다.

JavaScript

const readline = require('readline');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

Java

import java.util.Scanner;  
Scanner scanner = new Scanner(System.in); 

우선 두 언어의 차이점은

• 자바는 Scanner 생성 시 입력 소스만 지정
• 자바스크립트는 입력과 출력 모두 설정
• 자바는 더 간단하지만, 자바스크립트는 더 명시적으로 설정

이렇다.

두 코드 다 같은 목적으로 사용되는 "불러오기" 구문이지만,

자바는 import 키워드를 사용해 자바 기본 라이브러리에서 스캐너 클래스를 가져온다. 컴파일 시점에 이미 포함되어 있는 라이브러리를 불러옴

자바스크립트는 Node.js에서는 require() 함수를 사용하고, Node.js의 기본 모듈인 readline을 가져온다. const readline = 부분은 불러온 모듈을 readline이라는 상수에 저장한다.

마치 우리가 계산기가 필요할 때:

자바: "문구점에서 계산기를 사와주세요" (import) 자바스크립트: "옆방에서 계산기 가져와주세요" (require)

JavaScript

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

const rl

인터페이스 객체를 저장할 상수를 선언 자바로 치면 Scanner scanner 부분과 비슷 rl은 일반적으로 'ReadLine'의 약자로 사용됨

readline.createInterface()

readline 모듈의 인터페이스를 생성하는 메소드 자바의 new Scanner() 처럼 새로운 객체를 만드는 역할

process.stdin:

표준 입력(Standard Input)을 의미 키보드로부터의 입력을 받음 자바의 System.in과 같은 역할

process.stdout:

표준 출력(Standard Output)을 의미 콘솔에 출력하는 역할 자바의 System.out과 같은 역할 (자바스크립트는 한번에 입,출력을 모두 명시한다)

(위와 비교) Java

Scanner scanner = new Scanner(System.in);

(자바는 입력만 작성함. 출력은 따로 필요할때 써주면 된다.)

• 입력값 저장을 위한 변수 선언

let input = [];  // 입력값을 저장할 배열

• 입력 받기

rl.on('line', function (line) {  // 비동기적으로 한 줄 입력 받기
    input = [line];
}).on('close', function() {
    str = input[0];
    // 여기서 처리
});

실제로 사용할 때는,

// 자바스크립트
rl.on('line', function(line) {  // 입력이 들어오면
    console.log(line);          // 출력하기
});

// 자바
Scanner scanner = new Scanner(System.in);
String line = scanner.nextLine();  // 입력 받기
System.out.println(line);          // 출력하기

전체적으로 봤을땐 자바스크립트가 더 어렵고 길어보이지만, 둘 다 중요한건 1.입력 받을 준비하기 2.출력할 준비하기

이것에만 집중하고 알면 된다.

밑으로 갈수록 자바스크립트의 코드만 해석했는데, 자바랑 차이점이 많은 것 같다.

주요 차이점을 물어보니

구조적 차이:

Java: 순차적으로 실행됨 (입력 → 처리 → 출력) JavaScript: 이벤트 기반 (입력이 들어오면 처리하는 방식)

코드 길이:

Java: 더 간단하고 직관적 JavaScript: Node.js의 특성상 더 복잡해 보임

입력 방식:

Java: Scanner 클래스로 간단히 처리 JavaScript: readline 모듈을 통한 이벤트 처리 방식

변수 선언:

Java: 명시적인 타입 선언 (String str) JavaScript: 동적 타입 (let input)

출력 방식:

Java: System.out.println() JavaScript: console.log()

이렇게 정리할 수 있을 것 같다.

결국 답은 마지막에

console.log(str)

이 코드 한줄 추가하면 통과였다... ^^...

뭘까 이기분.. 주객전도된 이 기분...

그래도 오늘 하나 알고가니 됐다! 한발짝 걸었다!