작품 우선
도구는 한 걸음 물러나고, 작품이 화면의 중심이 됩니다.
패널과 버튼은 무채색으로 차분하게 두고, 가장 선명한 색은 작품에 양보합니다. 프레젠테이션할 때는 도구가 모두 사라지고 작품만 남습니다.
아침 햇살.
유리 화병에 꽂은 파란 꽃.
SSHOW는 이렇게 디자인합니다.
로고와 색부터 움직임과 글쓰기까지. SSHOW의 화면을 만드는 원칙과 기준을 한곳에 모았습니다.
- 로고 끊김 없이 흐르는 S
- 색 무채색 바탕과 네 가지 브랜드 색
- 타이포그래피 두 가지 글꼴과 분명한 위계
- 레이아웃 넉넉한 여백과 일정한 간격
- 컴포넌트 어디서나 같은 버튼과 입력 칸
- 움직임 두 가지 곡선과 네 가지 시간
SSHOW 디자인 · 2026년 10월 업데이트
디자인 원칙부터 보기모든 화면은 네 가지 원칙에서 시작합니다.
어떻게 디자인할지 망설여질 때는 이 네 가지로 돌아옵니다.
원칙마다 직접 확인할 수 있는 예시를 함께 두었습니다.
절제된 색
브랜드 색은 칠하지 않고, 빛처럼 씁니다.
핑크, 오렌지, 오키드, 블루 네 가지 브랜드 색은 작품 뒤에 은은하게 번지는 빛으로, 한 화면에 한 곳에만 씁니다. 글자와 패널은 무채색으로 두어 작품을 받쳐 줍니다.
다음 씬으로
누르면 다음 씬으로 넘어갑니다.
차분한 움직임
움직임은 무엇이 바뀌었는지 보여 줄 때 씁니다.
씬이 넘어가거나 새 내용이 들어올 때 천천히 움직입니다. 저절로 넘어가는 화면에는 언제나 멈춤 버튼을 둡니다.
아침 햇살.
유리 화병에 꽂은 파란 꽃.
어디서나 같은 경험
어떤 화면에서 어떻게 쓰든, 똑같이 보이고 똑같이 작동합니다.
큰 화면이든 폰이든, 라이트 모드든 다크 모드든 작품은 만든 그대로 보입니다. 마우스로도, 터치로도, 키보드로도 똑같이 쓸 수 있습니다.
아침 햇살.
끊김 없이 흐르는 S.
SSHOW의 로고는 한 줄기로 끊김 없이 이어지는 S입니다. 이야기가 씬에서 씬으로 자연스럽게 흐르고, 보여 주는 사람의 마음이 보는 사람에게 닿는 모습을 담았습니다. 언제나 한 가지 색으로 씁니다.
로고에 담은 뜻
- 이어짐
- 씬과 씬, 생각과 생각이 끊김 없이 이어집니다.
- 살아 있음
- 멈춰 있어도 흐르는 듯한 곡선처럼, 보여 주는 모든 것이 살아 움직입니다.
- 닿음
- 보여 주는 사람의 이야기가 보는 사람에게 닿아, 한 흐름이 됩니다.
이렇게 씁니다
로고는 한 가지 색으로만 씁니다. 밝은 배경에는 글자와 같은 짙은 색, 어두운 배경에는 밝은 색을 씁니다.
로고는 원래 모양 그대로 씁니다. 돌리거나 늘이지 않고, 테두리나 그림자도 더하지 않습니다.
로고 자체에는 애니메이션을 넣지 않습니다. 움직임이 필요하면 로고 둘레의 빛이나 배경을 움직입니다.
포스터나 씬 하나에는 로고를 한 번, 한 가지 모양으로만 씁니다.
수치
- 최소 크기
- 16px
- 여백
- 30%
- 가로세로 비율
- 603 : 958
- 두 톤 모양
- 앱 아이콘
무채색 바탕에, 네 가지 브랜드 색.
화면의 바탕은 검정과 흰색, 회색으로 차분하게 만듭니다.
그 위에 네 가지 브랜드 색을 은은한 빛처럼 더합니다.
브랜드 그러데이션
핑크, 오렌지, 오키드, 블루 · 135°
무채색
| 라이트 모드 | 다크 모드 | |
|---|---|---|
| 배경 | ||
| 카드 바탕 | ||
| 글자 | ||
| 보조 글자 | ||
| 흐린 글자 |
다음 씬으로
누르면 다음 씬으로 넘어갑니다.
라이트 모드
다크 모드
이렇게 씁니다
네 가지 브랜드 색은 한 벌로 씁니다. 하나씩 나눠 쓸 때도 네 가지를 한자리에 모읍니다.
그러데이션은 핑크, 오렌지, 오키드, 블루 순서로, 135° 방향으로 잇습니다.
글자와 테두리에는 브랜드 색을 쓰지 않습니다. 그러데이션은 시작하기처럼 가장 중요한 버튼에만 씁니다.
누르거나 선택한 상태는 무채색의 농도로 보여 줍니다.
다크 모드에서는 배치는 그대로 두고 색값만 바꿉니다.
두 가지 글꼴, 분명한 위계.
SSHOW의 화면에는 두 가지 글꼴을 씁니다. 제목의 영문은 SSHOW가 직접 그린 글꼴로, 나머지와 모든 한글은 화면용 글꼴 하나로 씁니다. 제목과 본문은 크기와 굵기, 자간으로 구분하고, 한국어 문장은 단어 중간에서 줄을 바꾸지 않습니다.
글자 크기와 굵기
SSHOW는 이렇게 디자인합니다.
모든 화면은 네 가지 원칙에서 시작합니다.
어떻게 디자인할지 망설여질 때는 이 네 가지로 돌아옵니다. 원칙마다 직접 확인할 수 있는 예시를 함께 두었습니다.
패널과 버튼은 무채색으로 차분하게 두고, 가장 선명한 색은 작품에 양보합니다.
SSHOW 디자인
이렇게 씁니다
제목과 본문의 차이는 크기와 굵기로 만듭니다.
본문의 줄 간격은 글자 크기의 1.65배로 둡니다.
제목은 한글과 영문 모두 글꼴에 담긴 자간 그대로 둡니다.
큰 제목도 굵기는 800까지만 씁니다.
SSHOW가 직접 그린 영문 글꼴 · 미리보기
SSHOW SEO Sans
Soft · Even · Open
부드럽고 · 고르고 · 열린
곧게 선 글자가 한 걸음 물러나, 당신의 이야기가 먼저 보이게 합니다.
Letters step back.
Stories step forward.
-
Soft
부드럽고
획 끝을 부드럽게 맺습니다.
-
Even
고르고
어디서 읽어도 같은 결입니다.
-
Open
열린
작게 써도 또렷합니다.
Let the story come first.
넉넉한 여백, 일정한 간격.
내용 사이에는 충분한 여백을 두고, 같은 간격을 반복합니다.
그래서 어느 페이지를 열어도 같은 리듬으로 읽힙니다.
레이블
섹션 제목
섹션을 설명하는 짧은 문장입니다.
이렇게 씁니다
좌우 여백은 화면 너비에 따라 80px에서 20px까지 줄어듭니다. 섹션 위아래 여백은 화면 높이의 16%(폰은 10%)로, 56~200px 사이에서 정합니다.
기본은 왼쪽 정렬이고, 큰 메시지만 가운데에 둡니다.
한 화면에는 큰 메시지를 하나만 둡니다.
모서리 둥글기는 크기에 맞춥니다. 버튼과 칩은 완전히 둥글게, 사진은 18~20px, 큰 카드는 24~28px로 합니다.
수치
- 섹션 위아래 여백
- 56–200px
- 제목과 설명 사이 간격
- 22px
- 콘텐츠 최대 너비
- 1240px
- 좌우 여백
- 20–80px
버튼 하나도 같은 규칙으로.
버튼과 링크, 배지, 선택 컨트롤, 입력 칸은 모든 화면에서 같은 모양으로 씁니다.
직접 눌러 보세요.
이렇게 씁니다
버튼은 모두 알약 모양으로 만들고, 글자 굵기는 600으로 맞춥니다.
한 화면에 주요 버튼은 하나만 둡니다. 나머지는 보조 버튼이나 텍스트 버튼으로 씁니다.
버튼은 누르는 동안 97%로 작아졌다가, 손을 떼면 돌아옵니다.
링크 끝에는 화살표를 붙입니다. 다른 페이지는 →, 같은 페이지 안은 ↓, 다른 사이트는 ↗를 쓰고, 돌아가는 링크는 앞에 ←를 붙입니다.
수치
- 버튼 높이
- 32 · 40 · 48px
- 모서리
- 999px
- 글자 굵기
- 600
- 누를 때
- 97%
부드럽게 들어와, 서서히 멈춥니다.
SSHOW의 움직임은 주로 두 가지 곡선과 네 가지 시간으로 만듭니다.
그래서 어느 화면에서나 같은 호흡으로 움직입니다.
두 가지 곡선
-
기본
cubic-bezier(0.22, 0.61, 0.36, 1)
색과 투명도처럼 작은 변화에 씁니다.
-
강조
cubic-bezier(0.16, 1, 0.3, 1)
빠르게 출발해 길고 부드럽게 멈춥니다. 요소가 들어와 자리를 잡을 때 씁니다.
움직이는 시간
이름이 같으면 자연스럽게 이어집니다.
SSHOW에서 씬을 넘기면, 이름이 같은 오브젝트가 모양을 바꾸며 이어집니다. 두 씬을 오가 보세요.
사진
제목
아침 햇살.
이렇게 씁니다
작은 변화는 짧게, 큰 변화는 조금 더 길게 움직입니다.
들어올 때는 서서히 멈추고, 나갈 때는 빠르게 사라집니다.
한 번에 하나만 크게 움직입니다.
동작 줄이기가 켜져 있으면 움직임을 빼고, 바뀐 결과를 바로 보여 줍니다.
짧고 쉽게, 다정하게.
SSHOW는 쉬운 말로, 한 문장에 한 가지씩 말합니다.
도구 설명보다 그 도구로 만들 이야기를 먼저 꺼냅니다.
-
짧은 문장
한 문장에는 한 가지만 담습니다.
-
쉬운 말
전문 용어 대신 누구나 아는 말을 씁니다.
-
보이는 그대로
화면에서 확인할 수 있는 것만 말합니다.
상황에 맞는 말투
무엇을 보여 주고 싶나요?
저장하지 못했습니다. 연결을 확인한 뒤 다시 시도해 주세요.
이제, 보여 주세요.
좋은 예
링크를 복사했습니다.
아쉬운 예
링크 복사 작업이 성공적으로 완료되었습니다.
좋은 예
씬을 넘기면 이름이 같은 오브젝트가 이어집니다.
아쉬운 예
동일 식별자 객체 간 트랜지션 보간이 적용됩니다.
이렇게 씁니다
설명은 합니다체로 쓰고, 권할 때는 「~해 보세요」, 부탁할 때는 「~해 주세요」로 씁니다.
느낌표와 과장된 표현은 쓰지 않습니다.
맞춤법과 띄어쓰기를 지킵니다. 「보여 주다」는 늘 띄어 씁니다.
누구나 편하게 쓸 수 있도록.
글자는 배경과 충분히 대비되게, 누를 곳은 충분히 크게 만듭니다.
마우스가 없어도, 움직임을 줄여도 똑같이 쓸 수 있습니다.
-
읽기 쉬운 글자
12.7 : 1 ≥ 4.5 : 1 좋은 예읽기 쉬운 대비
글자와 배경의 명암비를 4.5:1 이상으로 맞춥니다.
-
넉넉한 터치 영역
터치 화면에서는 버튼이 작아 보여도, 누를 수 있는 영역을 가로세로 44px 이상으로 만듭니다.
-
여기서 Tab 키를 눌러 보세요
키보드로도 편하게
Tab 키로 이동하면 지금 위치가 테두리로 또렷하게 보입니다.
-
동작 줄이기
기기 설정에서 동작 줄이기를 켜면, 저절로 움직이던 빛과 화면도 모두 멈춥니다.
→ 키나 스페이스바로 넘기고, Esc 키로 닫습니다.옆으로 밀거나 양옆을 눌러 넘깁니다.