PatternFly 디자인 가이드라인

PatternFly를 위한 명확하고 일관성 있는 디자인 문서를 작성하는 지침이에요. PatternFly의 디자인 가이드라인은 PatternFly 요소와 컴포넌트의 디자인·용도·동작 등에 관한 정보를 사용자에게 제공해요.

출처: PatternFly Design Guidelines

본문

디자인 가이드라인 기여 방법은 기여 가이드를 참고하세요.

디자인 가이드라인 섹션

가이드라인을 만들 때는 정보가 일관된 순서로, 일관되게 이름 붙고 구조화된 섹션 안에 제시되도록 다음 템플릿을 참고하세요. 섹션은 생략할 수 있지만, 있으면 지정된 섹션 제목과 제목 수준을 사용해야 합니다.

요소 (Elements, H2)

컴포넌트의 시각적 디자인에서 각 주요 부분을 위한 번호가 매겨진 주석 태그를 포함한 컴포넌트 이미지를 표시하세요. 특정 아이콘·헤더·필드·기호·컴포넌트 구조에 포함된 다른 모든 것을 포함하세요. 이미지 뒤에는 태그를 지정한 모든 부분을 나열해, 각 주석 태그에 표시된 번호와 일치시키세요. 이 목록에서 각각에 대한 설명을 제공하세요.

예를 들어:

사용 (Usage, H2)

컴포넌트가 어떻게 사용되는지, 언제 사용하는지, 왜 사용해야 하는지 설명하세요. 그것이 해결하는 데 도움이 되는 문제에 대한 설명을 포함하고, 유사한 컴포넌트에 대한 장점을 다루세요. 시각적 예시를 위해 이미지를 포함하세요.

포함할 추가 하위 섹션:

언제 사용하나 (When to use, H3)

언제 사용하지 않나 (When not to use, H3)

X를 쓸 때 vs. Y를 쓸 때 (When to use X vs. Y, H3)

잘못된 사용 예시 (Examples of incorrect usage, H3)

동작 (Behavior, H2)

컴포넌트가 어떻게 기능하는지 설명하고, 요소들이 그 목적을 달성하기 위해 서로 어떻게 상호작용하는지 분석하세요. 컴포넌트의 작동 방식을 보여주기 위해 추가 이미지나 애니메이션을 포함하는 것이 도움이 될 수 있어요.

변형 (Variations, H2)

컴포넌트의 다양한 형태를 보여주고, 각각을 언제 사용할지 나타내는 설명을 포함하세요.

포함할 추가 하위 섹션:

X 변형을 쓸 때 vs. Y 변형을 쓸 때 (When to use X variation vs. when to use Y variation, H3)

간격 (Spacing, H2)

컴포넌트와 그 콘텐츠의 간격 요구사항을 소개하세요. 적절한 간격에 대한 자세한 내용은 간격 가이드라인을 참고하세요.

배치 (Placement, H2)

컴포넌트가 UI에서, 그리고 다른 컴포넌트와의 관계에서 어디에 위치해야 하는지에 대한 세부 정보를 제공하세요.

콘텐츠 고려사항 (Content considerations, H2)

컴포넌트 안에 포함될 수 있는 다양한 콘텐츠를 보여주세요. 여기서 사용자가 알고 싶어 할 추가 팁과 요령을 줄 수도 있어요. 콘텐츠 지침에는 다음이 포함돼요:

라벨링과 메시지 텍스트에 대한 편집 가이드라인.
길이 제한과 텍스트가 넘칠 때 해야 할 일.
현지화 고려사항.

접근성 (Accessibility, H2)

접근성 탭이 있는 각 컴포넌트는 이 섹션 안에 다음 문장을 포함해야 해요:

"접근성에 대한 정보는 [컴포넌트 이름] 접근성 탭을 방문하세요."

그런 다음 "accessibility tab"이라는 단어에 컴포넌트의 접근성 탭을 링크하세요.

형식 (Formatting)

디자인 문서의 콘텐츠를 형식화하는 방식에 다음 모범 사례가 반영되어야 해요.

대문자 사용 (Capitalization)

우리의 대문자 사용 스타일 가이드라인은 PatternFly 전반의 대문자 사용 모범 사례를 정리해요.

항상 제목을 문장형 대문자(sentence case)로 쓰세요. 컴포넌트 이름은 소문자로 쓰세요.

예를 들어, "Usage guidelines for card views"

굵게와 기울임 (Bolds and italics)

컴포넌트 이름을 처음 소개할 때 굵게 쓰세요.

예를 들어, "A card is a square or rectangle container of related information."

강조를 위해 단어를 기울임꼴로 쓰되, 아껴서 사용하세요.

목록 (Lists)

목록은 길고 복잡한 콘텐츠를 더 짧고 스캔 가능한 섹션으로 정리하는 데 도움이 돼요. 사용 사례·예외·절차를 소개할 때 목록을 사용하세요.

목록을 만들 때 다음 모범 사례를 따르세요:

기본적으로 불릿을 사용하세요. 항목의 순서가 중요할 때만 숫자를 사용하세요(콜아웃 목록처럼).
공유하는 정보를 설명하는 절이나 구문으로 목록을 도입하세요.
각 항목을 대문자로 시작하세요.
목록 항목이 문장이거나, 목록을 도입하는 절/구문과 결합했을 때 완전한 문장을 이루면 문장 끝에 마침표를 붙이세요.
병렬 구조를 유지하세요. 모든 목록 항목을 같은 품사로 시작하세요(예: 이 목록의 각 항목은 동사로 시작).

이미지 (Images)

디자인 문서는 UI에서 요소를 맥락화하고 동작 중임을 보여주기 위해 이미지를 포함해요. 모든 이미지는 접근성을 위해 alt 텍스트를 포함해야 합니다.

주석 (Annotations)

주석은 이미지의 특정 영역을 강조해요. 주석을 사용할 때 다음 모범 사례를 따르세요:

번호가 매겨진 콜아웃을 사용해 이미지의 여러 영역을 지적한 다음, 해당하는 번호 목록을 사용해 각각을 설명하세요. 예를 들어:
1. Items in view: 사용자가 페이지당 항목 수(나열된 항목 개수)를 선택할 수 있게 해주며, 전체 페이지네이션에서 볼 수 있음.
2. Compact pager: 사용자에게 이전 페이지와 다음 페이지 컨트롤만 제공함.
한 항목만 강조하려면 콜아웃 사용을 피하세요. 큰 뷰의 작은 부분을 지적하거나, 항목이 이미지에서 명확히 보이지 않을 때만 사용하세요. 빈 번호 없는 콜아웃으로 영역을 표시한 다음, 설명에서 굵게 표시하세요. 예를 들어:
- 로그인 버튼을 항상 두 단어 "Log in"으로 쓰세요.

스타일, 목소리와 톤 (Style, voice, and tone)

PatternFly의 문서는 친근하고 설명적이에요. 목소리에 대해 더 알아보려면 브랜드 목소리와 톤 섹션을 참고하세요.

디자인 가이드라인을 작성할 때 다음을 사용하세요:

현재 시제.
2인칭 관점("you").
강조를 위해 수동태를 쓰지 않는 한, 능동태.
직설적인 언어와 문장 구조.
축약형 대신 전체 단어로 예시 도입("e.g." 대신 "for example") — 용어 목록에서 볼 수 있듯이.
문서의 요소를 참조할 때 방향 언어(위·아래·왼쪽·오른쪽) 대신 서술적 언어.
서술적 하이퍼링크("click here"가 아니라).

다른 PatternFly 페이지에 링크한다면 전체 URL 대신 상대 URL을 사용하세요.

상대 URL: /components/tooltip/design-guidelines
전체 URL: https://www.patternfly.org/components/tooltip/design-guidelines

PatternFly 디자인 가이드라인