색 하나를 고르는 데 회의가 길어질 때가 있습니다. 누구는 차분해서 좋다고 하고, 누구는 심심하다고 합니다. 화면을 여러 장 만들다 보면 버튼 색이 달라지고 제목 크기도 조금씩 벌어집니다. 취향을 맞추는 일만으로는 끝내기 어려운 문제입니다.
광사넷 디지털허브의 디자인 작업에서는 화면마다 따를 약속을 먼저 정리했습니다. 어떤 조직의 사이트인지, 무엇을 눈에 띄게 할지, 어떤 글자가 어떤 배경에서 읽혀야 하는지 문서로 남기는 일입니다. 이것이 디자인 시스템의 출발점이었습니다.
레퍼런스에서는 모습보다 원리를 골랐습니다
제공된 작업 초안은 네 가지 관점의 레퍼런스를 살폈다고 설명합니다. 서비스가 비슷한 곳, 회원 중심의 네트워크, 활동과 투명성을 보여주는 곳, 국내 이용자에게 익숙한 기준선입니다. 특정 사이트의 좋은 부분을 모두 가져오는 대신 각자에게서 무엇을 배울지 나누었습니다.
회원사를 찾는 기능을 앞에 둔 이유는 참고하되 커다란 사진 배너는 가져오지 않을 수 있습니다. 콘텐츠가 많은 구조를 보면서도 첫 화면 팝업은 쓰지 않기로 할 수 있습니다. ‘빌릴 원리’ 옆에 ‘빌리지 않을 것’과 ‘우리에게 맞게 바꿀 방법’을 적으면 취향이 아니라 판단의 근거가 남습니다.
| 살필 것 | 예시 | 우리의 결정 |
|---|---|---|
| 빌릴 원리 | 이용자가 할 일을 먼저 찾게 합니다. | 회원사 찾기와 문의 경로를 분명히 합니다. |
| 빌리지 않을 것 | 큰 배너나 팝업이 핵심 행동을 가립니다. | 조직의 정보량과 목적에 맞춰 덜어냅니다. |
| 바꾸어 적용할 것 | 숫자로 현재의 활동을 보여줍니다. | 출처와 기준일이 확인된 값만 씁니다. |
콘셉트는 조직이 하는 일에서 찾았습니다
광사넷의 기획에서 중요했던 것은 여러 회원사를 찾고, 문의하면 사무국이 연결해 준다는 구조였습니다. 명부와 안내, 연결이라는 재료에서 ‘건물 입구의 안내판’이라는 비유가 나왔습니다. 회원사가 이름을 올리고, 방문자가 찾고 두드리면 사무국이 이어 주는 장면입니다.
실제 공동입주 건물의 특정 안내판이 직접적인 모티브였는지는 별도 확인이 필요합니다. 이 글에서는 그것을 확인된 현장 유래로 소개하지 않고 디자인을 설명하는 개념으로 다룹니다. 핵심은 건물의 형태보다 여러 조직을 찾고 연결하는 기능입니다.
이 비유는 메인의 회원사 안내판이라는 대표 요소로 이어집니다. 다만 순서를 매일 바꾸는 방식이나 노출의 공정성은 구현과 운영을 확인해야 말할 수 있습니다. 기획 의도와 현재 작동 상태를 같은 것으로 쓰지 않는 편이 정확합니다.
다른 조직에 그대로 붙여도 맞는 콘셉트인지 묻는 것도 도움이 됩니다. 답이 그렇다면 아직 그 조직의 이야기를 충분히 담지 못했을 수 있습니다. 다른 프로젝트와 비교할 때에도 색 하나가 겹쳤는지보다 첫인상과 대표 요소, 정보의 흐름이 구별되는지 살핍니다. 특정 개수만 넘으면 실패라는 보편 규칙이 있는 것은 아닙니다.
색에는 역할을 주고, 조합의 대비를 확인합니다
색을 계산한다는 말은 감각을 없앤다는 뜻이 아닙니다. 방향을 고른 뒤 밝고 어두운 단계를 만들고, 실제 글자와 배경의 조합이 읽히는지 수치로 확인한다는 뜻입니다. 보기에는 비슷해도 작은 글자로 쓰면 읽기 어려운 색이 있습니다.
W3C의 WCAG 2.2는 일반 텍스트에 최소 4.5:1, 큰 텍스트에는 3:1의 대비를 제시합니다. 이 기준에는 예외와 적용 조건이 있으므로 색상표 한 장만 통과했다고 사이트 전체의 접근성이 확보되지는 않습니다. 버튼·포커스·상태와 실제 배경 조합을 따로 확인해야 합니다. [1]
| 역할 | 초안에서 제안한 방향 | 확인할 일 |
|---|---|---|
| 브랜드와 구조 | 파랑 계열로 제목·링크·구조를 연결합니다. | 글자·배경의 실제 대비와 사용 범위 |
| 핵심 행동 | 주황 계열로 중요한 채움 버튼을 구분합니다. | 버튼 위 글자색과 화면 내 경쟁 요소 |
| 안내판의 강조 | 노랑 계열을 제한적으로 사용합니다. | 작은 글자에도 읽히는지 |
| 상태와 포커스 | 상태와 키보드 위치에 별도 역할을 줍니다. | 색만 보지 않아도 의미를 알 수 있는지 |
‘한 색에 한 뜻’은 혼란을 줄이는 유용한 원칙입니다. 하지만 상태를 색으로만 알려서는 안 됩니다. 초록 표시 옆에 ‘접수됨’ 같은 말이나 아이콘을 함께 두고, 키보드 포커스도 주변에서 분명히 보이게 해야 합니다.
초안에는 본문 16:1, 보조 글자 6.8:1이라는 당시 측정값이 적혀 있습니다. 원본 색 쌍과 계산 기록을 이번 글에서 대조하지 않았으므로 현재 사이트의 측정 결과로 제시하지는 않습니다. 중요한 것은 주색을 바꾸면 색 단계와 대비 조합도 함께 다시 확인하는 절차입니다.
글꼴은 이름보다 쓰임을 정하는 일이었습니다
초안에서 선택한 한글 글꼴은 Pretendard, 숫자 글꼴은 Barlow Semi Condensed입니다. 한글을 읽는 흐름과 안내판의 숫자 표현을 나누려는 선택입니다. Pretendard 제작 저장소는 SIL 오픈 폰트 라이선스로 배포함을 밝히고 있습니다. Barlow 제작자 저장소도 OFL 1.1 라이선스를 명시하고 있습니다. 배포·재사용 때에는 해당 조건을 함께 확인합니다. ‘무료’라는 말만 적고 이용 조건 확인을 생략하지 않습니다. [2][3]
50~60대 이용자를 고려한 본문 18px은 이번 작업의 설계 선택입니다. 특정 나이에는 반드시 같은 크기를 써야 한다는 표준은 아닙니다. 휴대폰에서 줄 길이와 행간, 확대했을 때의 흐름까지 함께 읽어 봅니다. 날짜와 연도에 숫자 글꼴을 쓰더라도 작은 보조정보가 지나치게 가늘어지지 않는지 확인합니다.
한글 제목은 말 덩어리가 자연스럽게 이어지도록 줄을 나누고, 본문은 한 줄이 너무 길지 않게 제한합니다. 양쪽 정렬이나 과한 자간으로 빈틈을 맞추기보다 읽는 속도를 살핍니다. 버튼은 글자 크기뿐 아니라 누를 수 있는 영역과 주변 간격까지 봐야 합니다.
점수표는 고칠 곳을 찾기 위한 내부 도구였습니다
초안은 첫인상, 글자 위계, 색 규율, 레이아웃 리듬, 한글 조판, 상태와 디테일, 이미지, 모션, 모바일을 아홉 항목으로 평가했다고 설명합니다. 항목마다 5점 척도를 쓰고 네 가지 화면 폭에서 확인하는 방식입니다.
당시 내부 통과 기준은 모든 항목 4점 이상, 평균 4.3 이상, 자동 점검 결함 0으로 제시됐습니다. 이는 프로젝트의 내부 기준이며 객관적인 디자인 품질 인증이나 접근성 적합성 판정은 아닙니다. 자동 점검이 발견하지 못하는 문제도 있으므로 실제 읽기와 키보드·터치 사용을 함께 확인해야 합니다.
| 회차 | 기록된 평균 | 기록된 수정 주제 |
|---|---|---|
| 1회 | 3.78 | 채움 버튼의 경쟁, 작은 터치 영역, 이미지 사용 규칙 |
| 2회 | 4.22 | 버튼 위계와 터치 영역 수정, 제목 줄바꿈 보완 필요 |
| 3회 | 4.44 | 말 덩어리 단위 제목, 숫자 단위와 이미지 대체 규칙 |
제공된 초안의 당시 내부 평가값입니다. 원본 리뷰 기록을 이번 게시에서 직접 대조하지 않았으며, 이후 변경된 현재 사이트의 점수나 이용자 조사 결과가 아닙니다.
점수가 오른 것보다 무엇을 고쳤는지가 더 오래 남습니다. 한 번에 모든 장식을 바꾸기보다 효과가 큰 문제 몇 개를 골라 수정하고 같은 조건에서 다시 봅니다. 줄바꿈을 바꾼 뒤 뜻이 더 잘 읽히는지, 장식을 지운 뒤 순서가 사라지지 않았는지 확인합니다. 점수는 그 대화를 돕는 기록입니다.
의견이 바뀌면 시스템도 함께 고칩니다
초안에는 색의 다양성과 움직임을 보완하자는 담당자 의견이 담겨 있습니다. 발언의 직접 인용 여부는 확인되지 않아 인용문 대신 요구의 취지를 옮겼습니다. 분야별 색을 더하고 활동을 보여주는 움직임을 검토하되, 서로 다른 분류에 같은 색이 다른 뜻으로 쓰이지 않게 역할을 정하는 방향입니다.
움직임은 화면이 살아 있다는 느낌을 줄 수 있지만 정보 이해를 방해할 수도 있습니다. 숫자나 데이터의 변화를 설명하는지, 단순히 시선을 끄는지 나눠 봅니다. 움직임 줄이기 설정에는 불필요한 동작을 줄이거나 최종 상태를 보여주고, 자동으로 바뀌는 정보에는 이용자가 제어할 수 있는 방법을 마련합니다. WCAG는 자동으로 시작해 5초 넘게 이어지고 다른 내용과 함께 표시되는 이동·깜박임·스크롤 정보에 정지·숨김 등의 수단을 요구합니다. [4]
크림색이나 어두운 남색을 썼다는 이유만으로 ‘AI가 만든 디자인’이라고 판정할 수는 없습니다. 피할 목록은 도구의 출신을 가려내는 검사가 아니라 이 프로젝트에서 반복을 줄이고 개성을 살리기 위한 선택이어야 합니다. 바탕색이나 버튼 모양도 콘셉트와 읽기, 쓰임을 근거로 판단합니다.
- 원리를 고릅니다레퍼런스와 현장의 재료를 읽습니다.
- 역할을 정합니다색·글꼴·간격·상태의 약속을 만듭니다.
- 실제 화면에서 확인합니다대비·줄바꿈·키보드·터치를 봅니다.
- 수정하고 기준을 갱신합니다바뀐 이유와 영향을 함께 남깁니다.
화면이 늘어나도 돌아갈 기준을 남깁니다
다른 조직에서 시작한다면 레퍼런스의 원리를 적고, 현장에서 쓰는 말과 자료를 모아 콘셉트를 한 문장으로 만들어 보시기 바랍니다. 색을 고른 뒤에는 쓰임과 대비를 정하고, 글꼴을 정한 뒤에는 실제 내용을 넣어 읽어 봅니다. 화면 폭과 입력 방식이 달라져도 같은 약속이 작동하는지 확인합니다.
디자인 시스템은 취향을 금지하는 문서가 아닙니다. 선택의 이유를 남겨 나중에 더 잘 바꿀 수 있게 하는 문서입니다. 사이트가 커져도 같은 조직의 사이트로 읽히고, 담당자가 달라져도 무엇을 지켜야 할지 알게 하는 약속입니다.
다음 07편에서는 이 디자인 단계와 앞선 준비를 다른 조직에도 반복할 수 있게 묶는 ‘사이트 공장’을 살펴봅니다.
광사넷 사례와 당시 내부 점수는 제공된 디자인 초안을 바탕으로 편집했습니다. DESIGN·레퍼런스·비주얼리뷰 원문 및 현재 광사넷 화면은 이번 게시에서 직접 대조하지 않았습니다. 콘셉트는 설계 개념으로 설명하며 특정 건물의 실제 유래로 단정하지 않습니다.