Morqelia 웹디자인 스튜디오 Morqelia 웹디자인 스튜디오

KRDS 디자인 시스템 · 대구 민간 프로젝트용

공공 UI 패턴을 민간에 빌려오기

KRDS는 대한민국 공공 영역의 UI 설계 표준입니다. 색상, 타이포그래피, 레이아웃, 컴포넌트, 서비스 패턴을 한 체계로 묶고, 웹 접근성 지침과 함께 움직입니다. 민간 웹사이트도 이 체계를 빌리면 기획이 빨라집니다. Morqelia는 대구 매장과 병원, 문화기관 화면에 맞게 다듬어 씁니다.

작은 화면에서 먼저 통하는 홈페이지 — 대봉로 사무실 상담과 화상 상담 모두 화면 목록을 함께 보며 시작합니다.

표준 대비 기준

4.5:1

본문 대비 4.5:1을 시안 검수의 출발점으로 둡니다.

담긴 체계

KRDS가 담는 것

버튼과 입력창, 테이블과 탭 같은 컴포넌트가 정리돼 있습니다. 검색과 예약, 신청 같은 서비스 패턴도 있습니다. 매번 새로 그리지 않아도 됩니다.

  • ✓ 컴포넌트

    버튼과 입력, 테이블과 탭

    두 단계 버튼과 한 가지 알림으로 통일합니다. 상태와 초점 표시가 함께 정해져 있어 개발과 디자인 언어가 같아집니다.

  • 서비스 패턴

    검색과 예약, 신청 흐름

    쇼핑몰 상세와 병원 예약처럼 자주 쓰는 흐름을 표준대로 씁니다. 폼 오류 문장과 약관 동의 순서가 정해져 있어 이탈이 줄어듭니다.

  • 접근성 규칙

    키보드와 대체 텍스트

    키보드 순서와 초점 표시를 패턴 안에 넣습니다. 컴포넌트마다 대체 텍스트 규칙을 두어 나중에 고치는 일을 줄입니다.

  • 대비 견본과 증명 시트를 나란히 둔 작업대

    일관된 화면의 학습

    일관된 화면이 쌓이면 사용자가 배웁니다. 기획서 분량도 줄어들고 운영 문서에 규칙으로 남습니다.

핀으로 고정된 점검 시트와 재단 자가 있는 스튜디오 압정판

민간 기획에 쓰는 법 — 쇼핑몰 상세와 병원 예약에서 먼저 통합니다.

민간 기획에 주는 영향

폼 오류 문장과 약관 동의 흐름을 표준대로 쓰면 문의와 예약 단계에서 막힘이 줄어듭니다. 공공 문화기관 사이트처럼 정보성과 접근성을 함께 잡는 구성이 민간에도 그대로 통합니다.

고르는 기준

컴포넌트 고르는 법

다 쓴다고 좋은 것이 아닙니다. 필요한 것만 고릅니다. 업종별로 묶음을 다르게 두면 화면이 가벼워지고 전화와 예약 연결이 빨라집니다.

자로 인쇄 견본을 재단하는 손
  • A

    버튼은 두 단계로

    주 행동과 보조 행동만 둡니다. 색과 크기 변형을 늘리지 않아 시선이 한 번에 모입니다.

  • B

    알림은 한 가지로

    성공과 오류를 같은 자리, 같은 말투로 둡니다. 작은 매장 사이트는 검색과 전화 연결이 핵심이라 알림을 덜어냅니다.

  • C

    업종별 묶음

    소규모 매장은 검색, 지도 대신 전화 연결, 영업시간. 큰 병원은 예약, 증명서 발급, 진료 안내 흐름을 묶음으로 둡니다.

  • D

    빼는 것도 설계

    쓰지 않는 탭과 표는 문서에만 남기지 않고 시안에서 뺍니다. 남긴 것만 키보드로 끝까지 검수합니다.

검수 값 — 본문 16px / 1.70 · 행간 유지 · 초점 고리 2px

읽는 방법

색상과 타이포그래피 읽기

격자 화면 앞에서 원고 교정을 보는 손

대비 먼저, 색은 나중

공공 표준의 색은 대비를 전제로 잡힙니다. 브랜드 색은 포인트로만 쓰고 나머지는 표준 대비를 따릅니다. 한국어 화면에서 자간이 무너지지 않게 본문 크기와 행간이 함께 옵니다.

접근성과 함께 쓰기

2026년 공지가 KWCAG 2.2와 WCAG 2.1을 함께 언급한 것도 같은 맥락입니다. 키보드 순서와 초점 표시를 패턴 안에 넣고, 대체 텍스트 규칙을 컴포넌트마다 둡니다.

자주 빠지는 세 가지

초점 표시를 지우지 않기, 오류를 색만으로 알리지 않기, 이미지 버튼에 이름 붙이기가 대표적입니다. 패턴을 쓰면 세 가지가 기본값으로 들어갑니다.

현장 메모

딱딱한 공공 느낌이 나지 않게, 말투와 사진은 브랜드대로 둡니다. 표준은 뼈대이고 얼굴은 매장의 것입니다.

웹디자인 서비스 보기

순서대로

도입 순서 제안

기존 화면을 전부 뜯지 않아도 됩니다. 목록을 뽑고 겹치는 것만 표준으로 갈아 끼우면 됩니다.

  1. 1

    화면 목록과 중복 세기

    기존 화면 목록을 먼저 뽑고 중복되는 버튼과 폼을 셉니다. 같은 일을 하는 화면이 몇 개인지 숫자로 봅니다.

  2. 2

    표준과 브랜드 나누기

    표준으로 바꿀 것과 브랜드로 남길 것을 나눕니다. 말투, 사진, 대표 색의 자리는 비워 둡니다.

  3. 3

    시안 적용과 키보드 검수

    시안 단계에서 바로 적용하고 키보드로 끝까지 검수합니다. 운영 문서에 규칙을 남겨 다음 개편 때 그대로 씁니다.

마일라 판 위에 놓인 휴대전화와 자

Morqelia의 적용 방식

상담 때 화면 목록을 같이 봅니다. 대봉로 사무실이나 화상으로 진행하고, 전화 +82-53-421-9903으로 자료를 받습니다. 표준을 쓰되 말투와 사진은 브랜드대로 다듬습니다.

KRDS 적용 상담하기

월–금 09:00–18:00 · 25, Daebong-ro, Jung-gu, Daegu · 문의하기

저녁 여섯 시 빛이 드는 스튜디오 복도

마지막 안내

표준은 뼈대, 얼굴은 브랜드

KRDS 기반의 표준화된 UI 설계와 접근성 연동 방법을 시안에 그대로 옮깁니다. 공공 UI 디자인 체계를 민간 화면에 맞게 줄이고, 남는 자리는 매장의 말투와 사진으로 채웁니다.