Persona

Persona (페르소나)

Persona는 추가적인 상황 정보가 함께 있는 사람의 표현이에요. 한 사람의 신원을 나타내는 작은 카드라고 생각하면 돼요.

Persona는 보통 아바타, 상태 배지(presence badge), 그리고 그 사람에 대한 추가 데이터를 제공하는 최대 4줄의 텍스트 콘텐츠를 포함해요.

출처: Persona 문서

본문

Layout (레이아웃)

Text slot wrapping (텍스트 슬롯 줄바꿈)

기본적으로 persona의 텍스트 슬롯은 컨테이너가 너무 작아지면 다음 줄로 줄바꿈돼요.

Presence only (상태만 표시)

복잡한 레이아웃이나 공간이 제한된 레이아웃에서는 presenceOnly prop을 사용해 persona에서 아바타를 제거하세요. 그러면 사람의 이름 옆에 상태 배지가 표시돼요.

Accessibility (접근성)

기본적으로 persona는 상태가 내장되지 않은 정적 요소예요. 하지만 더 많은 맥락이나 정보를 제공하는 추가 상호작용을 포함한다면 상태(state)와 키보드 상호작용을 작성(author)해야 해요.

포커스 상태를 포함하려면 createFocusOutlineStyle을 사용하세요. persona가 활성화하는 상호작용이 키보드로 탐색하는 사람들에게 접근 가능하도록 탭 인덱스(tab index)를 꼭 포함하세요.

Content (콘텐츠)

Persona는 한눈에 보는 사람에 대한 간략한 정보를 제공해야 해요. 각 슬롯에 단일 단어나 짧은 문구가 가장 좋아요. 더 많은 정보를 제공해야 한다면 더 많은 세부 사항이 있는 popover를 여는 것 같은 상호작용을 구축해 보세요.

문장형 대문자 표기(sentence style capitalization)를 사용하고(첫 단어만 대문자) persona 텍스트 슬롯의 마침표를 생략하세요. 자세한 내용은 Microsoft Writing Style Guide의 Capitalization와 Periods를 참고하세요.

더 알아보기 (Learn more)