소프트웨어에서 시작하는 디자인 회사.

JNDS — JoNi Narrative Design System

Design is how it behaves.

Grammar is shared.
Expression is individual.

JNDS는 NCJK 제품이 공유하는 디자인 시스템입니다. 모든 제품을 같은 모습으로 만드는 대신, 인터페이스가 작동하는 방식에 공통 원칙을 둡니다. 사용자의 맥락을 이어주고, 주의를 존중하며, 현재 상태를 정확히 알리고, 실수에서 회복할 수 있도록 돕습니다. 접근성을 기본으로 하면서도 색상과 서체, 각 제품의 개성은 고유하게 유지합니다.

v2.4
현행 공식 기준 · 2026년 11월 11일 시행
5
핵심 원칙
6
시그니처
19
공통 문법 영역
39
컴포넌트

핵심 원칙

모든 NCJK 제품이 공유하는 다섯 가지 디자인 원칙.

  1. Narrative

    Every interaction continues a context.

    사용자가 이전에 무엇을 하고 있었는지, 지금 어디에 있는지, 다음에 무엇을 할 수 있는지 명확하게 보여줍니다.

  2. Calm

    Reduce noise. Create focus.

    불필요한 배지와 알림, 색상과 움직임을 줄여 중요한 정보에 집중할 수 있게 합니다. 성공은 조용하게, 오류는 차분하고 명확하게 알립니다.

  3. Comfort

    Familiar patterns come before novelty.

    새로운 디자인을 시도하더라도 사용자가 익숙하게 느끼는 플랫폼의 동작과 접근성 원칙을 존중합니다.

  4. Restraint

    Remove before adding.

    불필요한 장식과 기능을 추가하기보다 먼저 덜어내고, 꼭 필요한 요소의 의미를 강화합니다.

  5. Continuity

    Different expressions, one familiar language.

    제품과 화면, 기기가 달라져도 사용자가 하던 일과 익숙한 사용 방식은 자연스럽게 이어집니다.

시그니처

JNDS의 디자인 원칙을 시각적으로 표현하는 여섯 가지 방식.

각 시그니처를 간단한 비교를 통해 소개합니다. 움직임이 없어도 충분히 이해할 수 있는 곳에는 애니메이션을 추가하지 않았습니다.

Interaction in Practice

디자인은 행동하는 방식에서 드러납니다. 직접 경험해 보세요.

JNDS의 공통 문법을 경험할 수 있는 네 가지 데모입니다. 직접 조작하고, 상태를 바꾸고, 처음으로 되돌리면서 각 동작의 이유를 살펴볼 수 있습니다. 키보드와 스크린리더, 동작 줄이기 설정을 지원하며, 데모에서 입력한 내용이나 조작 기록은 수집하거나 외부로 전송하지 않습니다.

01 · One Signal

지금 가장 중요한 것은 무엇일까요?

직접 해 보기작업을 하나 선택해 보세요. 현재 작업에 필요한 정보나 다음 행동으로 가장 강한 강조가 이동합니다. 상황에 따라 강조할 요소가 없을 수도 있습니다.

에세이 초안

문단 중간에서 작업을 멈췄습니다. 이어서 작성하는 것이 자연스러운 다음 행동입니다.

가장 강한 강조 이어서 쓰기

JavaScript를 활성화하면 초안 작성, 변경 사항 검토, 읽기, 동기화 실패의 네 가지 상황을 선택할 수 있습니다. 각 상황에서 가장 강한 강조는 하나만 나타납니다. 초안과 검토에서는 다음 행동을, 읽기에서는 콘텐츠 자체를, 동기화 실패에서는 오류를 우선합니다.

이렇게 설계한 이유

JNDS는 사용자가 현재 하고 있는 작업에 따라 가장 중요한 신호 하나를 우선합니다(CSG One Signal, Context Priority). 화면에 버튼을 하나만 두라는 뜻은 아닙니다. 보조 행동은 그대로 유지하며, 글을 읽는 동안에는 특별히 강조할 행동이 없을 수도 있습니다.

오류나 위험, 중요한 상태 변화는 장식적인 버튼보다 우선합니다. 그래서 동기화에 실패한 상황에서는 오류 메시지를 가장 먼저 보여줍니다.

선택 상태와 키보드 포커스는 서로 다릅니다. 선택한 작업은 막대와 텍스트, 굵기로 구분하고, 키보드 포커스는 외곽선으로 표시합니다. 색상이 없어도 각각의 상태를 알아볼 수 있습니다.

JNDS의 원칙을 이해하기 위한 체험용 데모입니다. 이 페이지 안에서만 작동하며 다른 제품이나 사용자의 데이터를 변경하지 않습니다.

02 · Context Continuity

화면이 바뀌어도 하던 일은 이어질까요?

직접 해 보기목록에서 항목을 열어 메모를 수정하거나 고정해 보세요. 닫았다가 다시 열어도 내용이 유지되는지, 창의 너비를 바꾸면 화면이 어떻게 달라지는지 확인해 보세요.

보기 방식: 나란히

JavaScript를 활성화하면 목록에서 항목을 열고 메모를 수정할 수 있습니다. 항목을 닫았다가 다시 열어도 변경 내용과 선택 상태가 유지됩니다. 닫은 뒤에는 포커스가 원래 항목으로 돌아가며, 창 크기가 달라져도 배치만 바뀝니다.

이렇게 설계한 이유

JNDS가 보호하려는 것은 화면의 모든 요소가 아니라 사용자의 작업 맥락입니다(Task-centered Continuity). 작성 중인 내용과 선택, 머물던 위치는 유지하되 마우스 호버 상태나 이미 끝난 애니메이션까지 복원할 필요는 없습니다.

Back과 Dismiss는 역할이 다릅니다. 좁은 화면에서는 항목 상세가 목록에서 한 단계 들어간 화면이므로 ‘목록으로 돌아가기’를 사용합니다. 나란히 보기에서는 목록 옆의 패널이므로 ‘닫기’로 종료합니다. 두 방식 모두 Escape 키를 지원합니다.

패널을 닫으면 포커스가 해당 패널을 열었던 목록 항목으로 돌아갑니다(Context-aware Focus Return). 키보드와 스크린리더 사용자는 페이지 처음부터 다시 탐색하지 않고 이전 위치에서 작업을 이어갈 수 있습니다.

JNDS의 원칙을 이해하기 위한 체험용 데모입니다. 이 페이지 안에서만 작동하며 다른 제품이나 사용자의 데이터를 변경하지 않습니다.

03 · Meaningful Response

인터페이스는 사용자의 행동에 어떻게 반응해야 할까요?

직접 해 보기작업을 완료하고 다시 되돌려 보세요. 빠르게 여러 번 조작해도 각 입력은 한 번씩만 반영되며, 목록에는 실제 작업 상태가 유지됩니다.

전체 3개 중 3개 남음

  • 사진 인화 주문
  • 인쇄소에 답장
  • 행사장 예약

JavaScript를 활성화하면 작업을 완료로 표시할 수 있습니다. 누르는 즉시 상태와 남은 작업 수가 바뀝니다. 목록 옆의 되돌리기 버튼을 누르면 이전 상태가 복원되고, 포커스도 해당 작업의 버튼으로 돌아갑니다.

이렇게 설계한 이유

사용자의 입력에는 즉시 반응합니다. 버튼을 누르면 Press 상태가 나타나고, 같은 조작에서 실제 작업 상태도 변경됩니다(CSG Immediate Feedback). 애니메이션이 끝날 때까지 상태 변경을 지연하지 않습니다.

작업 완료는 되돌릴 수 있으므로 매번 확인을 요청하지 않습니다. 먼저 완료 상태를 반영하고, 같은 위치에서 되돌리기를 제공합니다(CSG Contextual Undo). 되돌리면 작업 상태와 포커스가 복원됩니다. 반대로 복구할 수 없는 작업이라면 실행 전에 적절한 확인이 필요합니다.

과도한 축하 효과나 금방 사라지는 알림은 사용하지 않습니다. 변경된 작업 상태와 남은 개수만으로도 결과를 이해할 수 있습니다. 목록 옆의 안내는 되돌리기와 스크린리더의 상태 전달을 위해 제공됩니다.

Ritubon의 버튼 누름과 상태 정착 모션은 해당 제품의 디자인 기록에 따른 사례입니다. 모든 NCJK 제품에서 검증이 끝난 공통 규격으로 소개하지는 않습니다.

JNDS의 원칙을 이해하기 위한 체험용 데모입니다. 이 페이지 안에서만 작동하며 다른 제품이나 사용자의 데이터를 변경하지 않습니다.

04 · Honest States & Recovery

오류가 발생해도 사용자의 작업은 안전하게 남아 있을까요?

직접 해 보기연결 상태가 ‘오프라인’일 때 메모를 작성하고 저장해 보세요. 오류 안내를 확인한 뒤 ‘온라인’으로 전환해 다시 시도할 수 있습니다.

이 기능은 시뮬레이션입니다. 입력한 내용은 외부로 전송되지 않습니다.

아직 저장하지 않았습니다.

저장된 내용 · 데모

아직 저장된 내용이 없습니다.

JavaScript를 활성화하면 간단한 메모를 작성하고 저장 과정을 체험할 수 있습니다. 오프라인에서는 저장에 실패하지만 작성한 내용은 그대로 유지됩니다. 안내 메시지에서 오류 원인과 다음 행동을 확인하고, 온라인으로 바꾼 뒤 다시 저장할 수 있습니다. 입력한 내용은 외부로 전송되지 않습니다.

이렇게 설계한 이유

화면은 실제로 확인된 상태만 알려줍니다(CSG Contextual State Visibility). ‘저장 중…’은 저장을 시도하는 동안에만, ‘저장했습니다’는 저장이 실제로 완료된 뒤에만 표시합니다. 애니메이션이 끝났다는 이유로 작업이 완료됐다고 알리지 않습니다.

이 데모에서는 정확한 저장 진행률을 측정할 수 없으므로 임의의 0~100% 진행률을 표시하지 않습니다. 대신 진행 중임을 나타내는 선과 안내 문구를 사용합니다(CSG Truthful Progress). 저장이 진행되는 동안에는 중복으로 제출할 수 없도록 합니다.

오류는 발생한 위치에서 바로 안내합니다(CSG In-place Recovery). 무엇이 잘못됐는지, 어떤 내용이 안전하게 남아 있는지, 다음에 무엇을 할 수 있는지 설명합니다. 작성한 글은 사라지지 않으며, 사용자의 동의 없이 자동으로 다시 시도하지 않습니다. 재시도 시점은 사용자가 직접 결정합니다.

JNDS의 원칙을 이해하기 위한 체험용 데모입니다. 이 페이지 안에서만 작동하며 다른 제품이나 사용자의 데이터를 변경하지 않습니다.

Foundations

눈에 드러나지 않아도 경험을 지탱하는 기초.

타이포그래피와 간격

일곱 가지 타이포그래피 역할로 정보의 위계를 만듭니다. 굵기에만 의존하지 않고 크기와 간격, 대비를 함께 활용합니다. JNDS는 특정 서체를 강제하지 않으며, 이 사이트에는 Pretendard를 사용했습니다. 아래에서 실제 적용된 글자 크기를 확인할 수 있습니다.

Display
Design is how it behaves.
Headline
문법은 공유합니다.
Title
표현은 제품마다 다릅니다.
Body
무엇보다 중요한 것은 읽기 편안한 환경입니다. 적절한 줄 길이와 줄 간격, 라이트와 다크 테마 모두에서 충분한 대비를 유지합니다.
Label
이어서 쓰기
Caption
4분 전 수정
Data
09:41 · 1,240 · 12.5%

데이터 타이포그래피

시간과 개수, 진행률처럼 값이 바뀌는 숫자에는 일정한 너비의 숫자를 사용할 수 있습니다. 숫자가 바뀌어도 정렬이 흐트러지거나 주변 요소가 움직이지 않도록 돕습니다.

간격 체계

JNDS의 간격은 4px부터 64px까지 여덟 단계로 구성됩니다. 작은 간격은 관련 요소를 묶고, 큰 간격은 정보와 맥락을 구분합니다. 잠깐 확인할 때, 일상적으로 사용할 때, 작업에 집중할 때처럼 상황에 따라 적절한 정보 밀도를 선택합니다.

  1. 14
  2. 28
  3. 312
  4. 416
  5. 524
  6. 632
  7. 748
  8. 864

공통 UI 아이콘

UI 아이콘은 개별 제품의 시각 테마가 아닌 공통 문법에 속합니다. 같은 행동에는 같은 의미의 아이콘을 사용합니다. 윤곽선 중심의 둥근 형태, 24px 기본 격자, 단색 표현, 일관된 아이콘 계열을 기본 방향으로 삼습니다.

JNDS v2.4는 모든 NCJK 제품에 공통 UI 아이콘 체계를 적용하도록 규정합니다. 다만 최종 벡터 세트는 아직 제작되지 않았고 실제 제품에도 적용되지 않아, 이 페이지에서는 완성된 아이콘을 제시하지 않습니다.

  • 같은 행동에는 같은 의미를

    닫기는 닫기, 뒤로 가기는 뒤로 가기, 완료는 완료를 뜻합니다. 아이콘의 의미를 임의로 바꾸지 않습니다.

  • 선택 상태는 색상만으로 구분하지 않습니다

    배경과 대비, 채움 등 여러 시각적 단서를 활용해 색상에 의존하지 않고도 선택 상태를 이해할 수 있게 합니다.

  • 의미가 달라질 때만 움직입니다

    더하기 아이콘이 실제로 닫기 기능으로 바뀌는 경우처럼, 동작의 의미가 달라질 때만 아이콘을 회전시킵니다.

  • 제품 아이콘은 독립적으로 유지합니다

    앱 아이콘은 각 제품의 정체성을 나타내고, 공통 UI 아이콘은 제품 안에서 익숙한 조작 경험을 제공합니다.

아이콘 크기와 터치 영역은 구분합니다

화면에 보이는 아이콘이 24px이어도 실제 누를 수 있는 영역은 44~48px 정도로 확보해 편하게 조작할 수 있도록 합니다.

아이콘 크기 · 24px 터치 영역 · 44px

라이트와 다크

JNDS v2.4는 모든 NCJK 제품에서 사용자가 라이트와 다크 테마를 직접 선택할 수 있도록 합니다. 테마를 바꿀 때는 화면의 각 요소가 따로 바뀌는 느낌보다 하나의 장면이 자연스럽게 전환되는 경험을 지향합니다. 두 테마 모두 각 제품의 고유한 색상과 분위기를 유지합니다.

이 사이트의 테마 전환

  • 기본 테마는 다크입니다. 라이트를 선택하면 이 브라우저에 선택한 테마가 저장됩니다.
  • 배경과 표면, 글자, 구분선, 워드마크, 열린 대화상자가 하나의 장면처럼 함께 전환됩니다.
  • 테마가 바뀌어도 하던 작업은 그대로 유지됩니다. 작성 중인 글과 한글 입력 상태, 커서, 포커스, 스크롤 위치, 열린 패널이 유지됩니다.
  • 빠르게 여러 번 전환해도 마지막 선택이 적용됩니다. 동작 줄이기 설정이 켜져 있으면 애니메이션 없이 즉시 전환됩니다.

이 사이트의 테마 전환에는 600ms 크로스페이드와 cubic-bezier(.4, 0, .2, 1) 곡선을 사용했습니다. Gloword 프로토타입을 참고한 실험값으로, JNDS의 공식 모션 토큰은 아닙니다. JNDS는 전환의 행동 원칙을 승인했으며, 정확한 시간과 곡선은 추가 검증이 필요합니다.

직접 체험하기

아래에 글을 입력한 뒤 테마를 바꿔 보세요. 입력한 내용과 커서 위치, 포커스가 그대로 유지됩니다.

JNDS in Practice

실제 제품에서 만나는 JNDS.

행동 문법은 공유하지만, 디자인 표현은 제품마다 다릅니다. 각 제품이 현재 JNDS와 어떤 관계에 있는지 실제 진행 상태를 바탕으로 소개합니다.

  • Ritubon

    정식 출시

    JNDS 적용 현황

    JNDS v2.4를 처음 적용할 제품으로 선정했습니다. 아직 적용 작업이 시작되지 않았으므로, 현재 제품을 v2.4 구현이 완료된 사례로 소개하지 않습니다.

    명확한 정보 구조와 차분한 색상을 바탕으로, 파랑에서 보라로 이어지는 고유한 심볼을 사용합니다.

    제품 자세히 보기

  • 개발 중

    JNDS 적용 현황

    Ritubon에 이어 JNDS v2.4를 적용할 예정입니다. 현재 개발 중인 버전은 사용자가 선택한 폴더에 Markdown 파일로 글을 저장하며, 작성한 콘텐츠를 직접 소유하고 관리할 수 있도록 설계했습니다. 이 사이트의 라이트·다크 테마 전환에는 Gloword 프로토타입의 실험값을 참고했습니다.

    넉넉한 여백과 큰 세리프 제목, 섬세한 구분선, 아카이브 그린을 활용한 에디토리얼 디자인입니다.

    제품 자세히 보기

  • CollectionEve

    개발 중

    JNDS 적용 현황

    JNDS의 첫 번째 레퍼런스 제품입니다. v2.2 시기에 실제 화면을 바탕으로 디자인 문법을 검증했습니다. 따뜻한 라이트 테마는 CollectionEve만의 표현으로, 다른 NCJK 제품의 시각적 기준은 아닙니다. 현재는 새로운 개발 방향을 준비하고 있습니다.

    흰 바탕, 차콜 글자, 하나의 주황 신호색을 사용합니다.

    제품 자세히 보기

Design is how it behaves.

NCJK — A design company that begins with software.

Grammar is shared. Expression is individual.

의견 남기기

NCJK 웹사이트나 제품에 대한 의견을 짧게 남겨 주세요.

의견 유형

0 / 500 자

답변이 필요할 때만 입력해 주세요. 입력하지 않아도 보낼 수 있으며, 모든 의견에 답변드리지 못할 수 있습니다.

의견 유형, 대상, 의견 내용, 지금 보고 있는 페이지 주소, 그리고 입력하신 경우 이메일 주소를 받습니다. 의견을 확인하고, 요청하신 경우 회신하는 데만 사용하며, 받은 날부터 6개월 후 삭제합니다.개인정보 처리방침