aswin-haridas/apple-guidelines-for-ui

UI 디자인 가이드라인 (플랫폼 중립적)

references/ (이 파일과 같은 디렉토리)에 119개의 참조 페이지가 있으며, Apple의 HIG를 모든 플랫폼에 적용할 수 있도록 재작성되었습니다. 각 페이지는 원본을 가리키는 Source: 줄을 유지합니다.

사용 방법

1. 작업이 관련된 주제(컴포넌트, 패턴, 기초, 입력)를 식별합니다. 아래 카탈로그에서 선택하세요.
2. 읽기 도구를 사용하여 관련 페이지만 읽습니다(예: references/buttons.md). 어떤 페이지가 해당 주제를 다루는지 확실하지 않은 경우 references/에서 키워드로 검색하세요.
3. 실제 사용 중인 플랫폼(웹, Android, iOS, 데스크톱...)에 맞게 지침을 적용합니다. 페이지에서 교차 플랫폼에 해당하는 항목(스크린 리더, Cmd/Ctrl, Material 대 시스템 규칙 등)을 명시하는 경우 대상 플랫폼에 맞는 것을 선택하고, 충돌 시 해당 플랫폼의 네이티브 규칙을 따릅니다.
4. UI를 검토할 때는 페이지와 특정 규칙(예: "alerts.md: 파괴적 동작에는 취소 버튼을 사용하세요")을 인용하고 구체적으로 변경할 사항을 말합니다.

모든 UI 작업에 대해 design-principles.md (목적, 주도권, 책임감, 친숙함, 유연성, 단순함, 장인정신, 즐거움)와 accessibility.md를 항상 고려하세요.

색인 페이지: index.md, foundations.md, patterns.md, components.md, inputs.md.

카탈로그

• accessibility.md — 접근성: 접근성 좋은 사용자 인터페이스는 모든 사람이 앱이나 게임에서 훌륭한 경험을 할 수 있도록 합니다.
• action-sheets.md — 액션 시트: 액션 시트(때로는 확인 대화상자 또는 바텀 시트 메뉴라고 함)는 사람들이 수행한 작업과 관련된 선택 사항을 제시하는 모달 뷰입니다.
• activity-views.md — 활동 뷰: 활동 뷰(흔히 공유 시트라고 함)는 현재 컨텍스트에서 사람들이 수행할 수 있는 다양한 작업을 제시합니다. 웹에서는...
• alerts.md — 알림: 알림은 사람들에게 즉시 필요한 중요한 정보를 제공합니다.
• app-icons.md — 앱 아이콘: 독특하고 기억에 남는 아이콘은 앱 또는 게임의 목적과 개성을 표현하며 사람들이 한눈에 인식할 수 있도록 돕습니다.
• augmented-reality.md — 증강 현실: 증강 현실(AR)을 통해 가상 객체와 실제 세계를 완벽하게 혼합하는 몰입감 있고 매력적인 경험을 제공할 수 있습니다.
• boxes.md — 박스: 박스는 논리적으로 관련된 정보와 컴포넌트를 시각적으로 구분된 그룹으로 만듭니다.
• branding.md — 브랜딩: 앱과 게임은 플랫폼에서 자연스럽게 느껴지면서도 즉시 알아볼 수 있는 방식으로 고유한 브랜드 정체성을 표현합니다.
• buttons.md — 버튼: 버튼은 즉각적인 동작을 시작합니다.
• charting-data.md — 데이터 차트 작성: 차트로 데이터를 표현하면 명확성과 매력으로 정보를 전달하는 데 도움이 됩니다.
• charts.md — 차트: 차트로 데이터를 구성하여 명확성과 시각적 매력으로 정보를 전달합니다.
• collaboration-and-sharing.md — 협업 및 공유: 훌륭한 협업 및 공유 경험은 간단하고 반응이 빨라 사람들이 콘텐츠를 효과적으로 소통하면서 참여할 수 있게 합니다.
• collections.md — 컬렉션: 컬렉션은 정렬된 콘텐츠 세트를 관리하고 사용자 정의 가능하고 시각성이 뛰어난 레이아웃으로 제공합니다.
• color-wells.md — 색상 팔레트: 색상 팔레트는 사람들이 텍스트, 도형, 가이드 및 기타 화면 요소의 색상을 조정할 수 있게 합니다.
• color.md — 색상: 신중한 색상 사용은 커뮤니케이션을 강화하고, 브랜드를 불러일으키며, 시각적 연속성을 제공하고, 상태와 피드백을 전달하며, 사람들이...
• column-views.md — 컬럼 뷰: 컬럼 뷰( 브라우저 또는 Miller 컬럼 이라고도 함)는 일련의 세로 패널을 사용하여 데이터 계층 구조를 보고 탐색할 수 있게 합니다.
• combo-boxes.md — 콤보 박스: 콤보 박스는 텍스트 필드와 풀다운 버튼을 하나의 컨트롤로 결합합니다.
• components.md — 컴포넌트: 시스템 정의 컴포넌트를 사용하고 사용자 지정하여 사람들에게 친숙하고 일관된 경험을 제공하는 방법을 알아보세요.
• content.md — 콘텐츠: - 차트
• context-menus.md — 컨텍스트 메뉴: 컨텍스트 메뉴는 인터페이스를 복잡하게 만들지 않고 항목과 직접 관련된 기능에 대한 액세스를 제공합니다.
• controls.md — 컨트롤: 컨트롤은 퀵 설정 패널, 잠금 화면 또는 하드웨어 단축키와 같은 시스템 표면에서 앱 기능에 빠르게 액세스할 수 있게 합니다.
• dark-mode.md — 다크 모드: 다크 모드는 어두운 색상 팔레트를 사용하여 저조도 환경에 맞춘 편안한 보기 환경을 제공하는 시스템 차원의 모양 설정입니다.
• design-principles.md — 디자인 원칙: 웹, 모바일, 데스크톱 등 모든 플랫폼에서 디자인을 안내하는 기본 원칙을 살펴보세요.
• designing-for-games.md — 게임 디자인: 사람들이 어떤 기기에서든 게임을 플레이할 때, 그들이 좋아하는 플랫폼 기능에 의존하면서 당신이 디자인한 세계에 빠져듭니다.
• disclosure-controls.md — 표시 컨트롤: 표시 컨트롤은 특정 컨트롤 또는 뷰와 관련된 정보와 기능을 표시하고 숨깁니다.
• drag-and-drop.md — 드래그 앤 드롭: 드래그 앤 드롭을 사용하면 사람들이 선택한 사진, 텍스트 및 기타 콘텐츠를 한 위치에서 다른 위치로 드래그하여 이동하거나 복제할 수 있습니다.
• edit-menus.md — 편집 메뉴: 편집 메뉴는 사람들이 현재 뷰에서 선택한 콘텐츠를 변경할 수 있게 하며, 복사, 선택, 잘라내기 등 관련 명령도 제공합니다.
• entering-data.md — 데이터 입력: 사람들로부터 정보가 필요할 때, 실수 없이 쉽게 제공할 수 있는 방법을 디자인하세요.
• feedback.md — 피드백: 피드백은 사람들이 무슨 일이 일어나고 있는지 알게 하고, 다음에 무엇을 할 수 있는지 발견하게 하며, 작업 결과를 이해하고 실수를 방지하도록 돕습니다.
• file-management.md — 파일 관리: 일부 앱은 사람들이 시스템 전체에서 관리할 것으로 예상하는 문서와 파일을 지원할 수 있습니다.
• focus-and-selection.md — 포커스 및 선택: 포커스는 사람들이 상호 작용하는 대상을 시각적으로 확인하는 데 도움이 됩니다.
• foundations.md — 기초: 기본 디자인 요소가 어떻게 풍부한 경험을 만드는지 이해합니다.
• game-controls.md — 게임 컨트롤: 정밀하고 직관적인 게임 컨트롤은 게임 플레이를 향상시키고 플레이어의 게임 몰입도를 높일 수 있습니다.
• gauges.md — 게이지: 게이지는 값 범위 내에서 특정 숫자 값을 표시합니다.
• generative-ai.md — 생성형 AI: 생성형 AI는 동적 콘텐츠로 앱이나 게임을 향상시키고 새로운 수준의 창의성을 여는 지능형 기능을 제공할 수 있게 합니다.
• gestures.md — 제스처: 제스처는 사람이 기기에서 앱이나 게임의 객체에 직접 영향을 미치기 위해 사용하는 물리적 동작입니다.
• getting-started.md — 시작하기: 웹, 모바일, 데스크톱 등 지원하는 모든 플랫폼에서 자연스럽게 느껴지는 앱 또는 게임을 만드세요.
• going-full-screen.md — 전체 화면: 휴대폰, 태블릿, 데스크톱 및 웹 브라우저는 사람들이 창을 화면에 가득 채우고 시스템 컨트롤을 숨길 수 있는 전체 화면 모드를 제공합니다.
• gyro-and-accelerometer.md — 자이로스코프 및 가속도계: 기기 내 자이로스코프와 가속도계는 물리적 세계에서 기기의 움직임에 대한 데이터를 제공할 수 있습니다.
• icons.md — 아이콘: 효과적인 아이콘은 사람들이 즉시 이해하는 방식으로 단일 개념을 표현하는 그래픽 자산입니다.
• image-views.md — 이미지 뷰: 이미지 뷰는 투명 또는 불투명 배경에 단일 이미지(또는 경우에 따라 애니메이션 이미지 시퀀스)를 표시합니다.
• image-wells.md — 이미지 필드: 이미지 필드는 이미지 뷰의 편집 가능한 버전입니다.
• images.md — 이미지: 아트워크가 지원하는 모든 기기에서 멋지게 보이도록 시스템이 콘텐츠를 표시하는 방법과 적절한 해상도로 아트를 제공하는 방법을 알아보세요.
• inclusion.md — 포용성: 포용적인 앱과 게임은 존중하는 커뮤니케이션을 우선시하고 모든 사람이 이해하고 즐길 수 있는 방식으로 콘텐츠와 기능을 제공하여 사람을 최우선으로 합니다.
• index.md — 인터페이스 디자인 가이드라인: 이 가이드라인은 웹, 모바일, 데스크톱 등 모든 플랫폼에서 훌륭한 경험을 디자인하는 데 도움이 되는 지침과 모범 사례를 포함합니다.
• inputs.md — 입력: 사람들이 앱이나 게임을 제어하고 데이터를 입력하는 다양한 방법에 대해 알아보세요.
• keyboards.md — 키보드: 물리적 키보드는 텍스트 입력, 게임 플레이, 앱 제어 등에 필수적인 입력 장치가 될 수 있습니다.
• labels.md — 라벨: 라벨은 사람들이 읽고 종종 복사할 수 있지만 편집할 수는 없는 정적 텍스트입니다.
• launching.md — 실행: 간소화된 실행 경험은 사람들이 앱이나 게임을 즉시 사용하기 시작하는 데 도움이 됩니다.
• layout-and-organization.md — 레이아웃 및 구성: - 박스
• layout.md — 레이아웃: 디스플레이 크기, 방향, 멀티태스킹 구성에 따라 적응하는 일관된 레이아웃은 사람들이 앱을 이해하고 즐기도록 돕습니다.
• lists-and-tables.md — 목록 및 표: 목록과 표는 하나 이상의 열로 구성된 행에 데이터를 표시합니다.
• live-viewing-apps.md — 라이브 시청 앱: 라이브 시청 앱을 디자인할 때는 콘텐츠를 우선시하고 라이브 시청 경험에 몰입을 유도하는 재미있고 유동적인 상호 작용을 만드세요.
• loading.md — 로딩: 가장 좋은 콘텐츠 로딩 경험은 사람들이 인지하기 전에 끝나는 것입니다.
• machine-learning.md — 머신 러닝: 머신 러닝은 앱과 게임이 데이터와 사용 패턴으로부터 학습하여 기존 경험을 개선하고 매력적인 새 경험을 만들 수 있게 합니다.
• managing-accounts.md — 계정 관리: 경험에 불필요한 장벽을 만들지 않는다면, 계정은 사람들이 콘텐츠와 기능에 접근하는 편리한 방법이 될 수 있습니다.
• managing-notifications.md — 알림 관리: 알림은 기기가 잠겨 있거나 사용 중일 때에도 사람들에게 시의적절하고 중요한 정보를 제공할 수 있습니다.
• maps.md — 지도: 지도는 앱이나 웹사이트에서 실내외 지리적 데이터를 표시합니다.
• materials.md — 재질: 재질은 전경 요소와 배경 요소 사이에 깊이, 계층, 위계감을 만드는 시각적 효과입니다.
• menus-and-actions.md — 메뉴 및 작업: - 활동 뷰
• menus.md — 메뉴: 메뉴는 사람들이 상호 작용할 때 옵션을 표시하므로 앱이나 게임에서 명령을 표시하는 공간 효율적인 방법입니다.
• modality.md — 모달리티: 모달리티는 상위 뷰와의 상호 작용을 방지하고 작업을 완료하거나 닫아야 하는 별도의 전용 모드로 콘텐츠를 표시하는 디자인 기술입니다.
• motion.md — 모션: 아름답고 유동적인 모션은 인터페이스에 생명을 불어넣고, 상태를 전달하며, 피드백과 지침을 제공하고, 시각적 경험을 풍부하게 합니다.
• multitasking.md — 멀티태스킹: 멀티태스킹을 사용하면 사람들이 한 앱에서 다른 앱으로 빠르게 전환하여 각각에서 작업을 수행할 수 있습니다.
• navigation-and-search.md — 내비게이션 및 검색: - 검색 필드
• nearby-interactions.md — 근접 상호 작용: 근접 상호 작용은 근접성을 사용하여 가까운 환경에서 사람과 물체의 존재를 통합하는 기기 내 경험을 지원합니다.
• nfc.md — NFC: 근거리 무선 통신(NFC)은 수 센티미터 이내의 기기가 무선으로 정보를 교환할 수 있게 합니다.
• notifications.md — 알림: 알림은 사람들에게 한눈에 이해할 수 있는 시의적절하고 가치 있는 정보를 제공합니다.
• offering-help.md — 도움말 제공: 가장 효과적인 경험은 접근하기 쉽고 직관적이지만, 필요할 때 상황별 도움말을 제공할 수 있습니다.
• onboarding.md — 온보딩: 온보딩은 사람들이 앱이나 게임을 빠르게 시작하는 데 도움이 될 수 있습니다.
• outline-views.md — 개요 뷰: 개요 뷰는 열과 행으로 구성된 셀의 스크롤 목록에 계층적 데이터를 표시합니다.
• page-controls.md — 페이지 컨트롤: 페이지 컨트롤(페이지 표시기 또는 점 표시기라고도 함)은 각각 플랫폼별 페이지를 나타내는 표시 이미지 행을 표시합니다.
• panels.md — 패널: 데스크톱 앱에서 패널은 일반적으로 다른 열린 창 위에 떠서 기본 창과 관련된 보조 컨트롤, 옵션 또는 정보를 제공합니다.
• patterns.md — 패턴: 일반적인 사용자 작업, 태스크 및 경험을 지원하기 위한 디자인 지침을 확인하세요.
• pickers.md — 피커: 피커는 사람들이 선택할 수 있는 고유한 값의 스크롤 가능한 목록을 하나 이상 표시합니다.
• playing-audio.md — 오디오 재생: 사람들은 기기 상황이 변경될 때 자동으로 조정되는 풍부한 오디오 경험을 기대합니다.
• playing-haptics.md — 햅틱 재생: 햅틱 재생은 사람들의 촉각을 활용하고 물리적 세계에 대한 친숙함을 앱이나 게임으로 가져올 수 있습니다.
• playing-video.md — 비디오 재생: 사람들은 사용하는 앱이나 게임에 관계없이 기기에서 풍부한 비디오 경험을 즐기기를 기대합니다.
• pointing-devices.md — 포인팅 장치: 사람들은 트랙패드나 마우스와 같은 포인팅 장치를 사용하여 인터페이스를 탐색하고 작업을 시작할 수 있습니다.
• pop-up-buttons.md — 팝업 버튼: 팝업 버튼(일부 플랫폼에서는 드롭다운 또는 선택이라고 함)은 상호 배타적인 옵션 메뉴를 표시합니다.
• popovers.md — 팝오버: 팝오버는 사람들이 컨트롤이나 대화형 영역을 클릭하거나 탭할 때 다른 콘텐츠 위에 나타나는 임시 뷰입니다.
• presentation.md — 표시: - 액션 시트
• printing.md — 인쇄: 앱은 필요할 때 시스템 제공 인쇄 기능을 통합하여 필요한 경우 사용자 정의 프린터 및 문서 관련 옵션을 표시할 수 있습니다.
• privacy.md — 개인정보 보호: 개인정보 보호는 가장 중요합니다. 필요한 개인정보 관련 데이터와 리소스에 대해 투명하게 공개하고 이를 보호하는 것이 필수적입니다.
• progress-indicators.md — 진행 표시기: 진행 표시기는 앱이 콘텐츠를 로드하거나 긴 작업을 수행하는 동안 중단되지 않았음을 알려줍니다.
• pull-down-buttons.md — 풀다운 버튼: 풀다운 버튼은 버튼의 목적과 직접 관련된 항목이나 작업의 메뉴를 표시합니다.
• rating-indicators.md — 평점 표시기: 평점 표시기는 일련의 수평으로 배열된 그래픽 기호(기본적으로 별)를 사용하여 순위 수준을 표시합니다.
• ratings-and-reviews.md — 평점 및 리뷰: 사람들은 앱이나 게임을 다운로드하기 전에 평점과 리뷰를 자주 봅니다.
• right-to-left.md — 오른쪽에서 왼쪽: 아랍어와 같은 오른쪽에서 왼쪽 언어를 지원합니다.

...

[번역을 위해 잘림]