Patterns / New
Empty state
An empty screen is a connection that hasn't happened yet. Explain why it's empty and offer the one step that fills it.빈 화면은 아직 일어나지 않은 연결입니다. 왜 비어 있는지 설명하고, 화면을 채울 한 걸음을 제안합니다.
Not connected yet아직 연결 전
The two halves of the Confluence D sit apart, waiting to come together. Move the pointer close to see them react.Confluence D의 두 형태가 떨어진 채 만남을 기다립니다. 포인터를 가까이 가져가면 반응합니다.
No connections yet아직 연결이 없어요
Pick a few interests and we'll suggest people and stories that match.관심사를 몇 개 고르면 어울리는 사람과 이야기를 제안해 드릴게요.
Anatomy구조
No connections yet아직 연결이 없어요
Pick a few interests to get started.관심사를 골라 시작해 보세요.
- 1Visual시각 요소
The separated symbol for first-time states only. Keep it small: 80-120px.분리된 심볼은 첫 사용 상태에만. 80~120px로 작게 씁니다.
- 2Title제목
What's missing, stated plainly.무엇이 비어 있는지 담백하게.
- 3Description설명
Why it's empty, or what will appear here. One or two sentences.왜 비었는지, 혹은 무엇이 나타날지. 한두 문장.
- 4Action행동
The single next step that fills the screen.화면을 채우는 단 하나의 다음 단계.
Types of empty빈 화면의 종류
| Type종류 | Situation상황 | Treatment처리 |
|---|---|---|
| First use첫 사용 | Nothing has been created yet아직 만든 것이 없음 | Symbol + invitation + primary action심볼 + 초대 문구 + 주요 행동 |
| No results결과 없음 | A search or filter matched nothing검색, 필터 결과가 없음 | Plain text + a way to broaden the search간결한 문구 + 조건을 넓히는 방법 |
| All done모두 완료 | The user cleared everything사용자가 모두 처리함 | A short positive message, no action needed짧은 긍정 메시지, 행동은 선택 |
| Error오류 | Content failed to load콘텐츠를 불러오지 못함 | What happened + Retry무슨 일인지 + 다시 시도 |
Usage사용 가이드
Always offer a next step항상 다음 단계를
Tell people what will appear here and give one action that gets them there.여기에 무엇이 나타날지 알려 주고, 그곳으로 가는 행동 하나를 제공합니다.
Don't leave a dead end with just 'No data'.'데이터 없음'만 남긴 막다른 화면을 만들지 않습니다.
Keep 'no results' light검색 결과 없음은 가볍게
For no results, repeat the query and suggest how to broaden it. Skip the big illustration.결과가 없을 땐 검색어를 다시 보여 주고 조건을 넓히는 방법을 제안합니다. 큰 그림은 생략합니다.
Don't reuse the first-use illustration for every empty state; the symbol loses its meaning.모든 빈 화면에 첫 사용 그림을 재사용하지 않습니다. 심볼의 의미가 흐려집니다.
Writing문구 작성
| Instead of이렇게 쓰지 말고 | Write이렇게 씁니다 |
|---|---|
| No data데이터 없음 | No connections yet아직 연결이 없어요 |
| 0 results found검색 결과 0건 | No results for 'yoga at dawn''새벽 요가' 결과가 없어요 |
| Error 500오류 500 | We couldn't load your list. Try again.목록을 불러오지 못했어요. 다시 시도해 주세요. |
| Oops! Nothing here!앗! 아무것도 없어요! | Stories you save will gather here.저장한 이야기가 여기에 모여요. |