왜 小村ソフト는 디지털청 디자인 시스템으로 HP를 만드는가 ── 저렴함과 품질은 양립할 수 있다

홈페이지 제작 견적에서 큰 비중을 차지하는 것이 디자인 제작 공수입니다. 小村ソフト는 이 공정을, 디지털청이 공개하고 있는 디자인 시스템을 토대로 삼아 대폭 압축하고, 비용을 억제하면서 품질을 안정시키는 진행 방식을 취합니다.

「저렴한 홈페이지 제작」이라고 들으면, 많은 사람은 어딘가에서 품질을 희생하고 있는 것은 아닐까 생각합니다. 실제로 가격을 낮추기 위해 요구사항 청취를 생략하거나, 템플릿에 문장만 흘려 넣는 제작은 무엇을 하는 회사인지 전달되지 않는 사이트를 만들기 쉽습니다.

小村ソフト의 HP 제작(홈페이지 제작)이 가격을 낮출 수 있는 것은 그쪽이 아니라 디자인 공정의 표준화 때문입니다. 이 기사에서는 그 토대로 삼고 있는 디지털청 디자인 시스템이 무엇인지, 실제로 무엇을 어떻게 쓰는지, 왜 저렴해지는지, 왜 품질이 떨어지지 않는지, 그리고 어떤 프로젝트에는 맞지 않는지를 차례로 설명합니다.

이후 당사 서비스명으로는 「HP 제작」, 일반적인 공정 명칭으로는 「홈페이지 제작」이라고 표기합니다.

1. 디지털청 디자인 시스템이란 무엇인가

디지털청 디자인 시스템은 디지털청이 공개하는, 행정 서비스의 웹사이트·앱을 위한 디자인 표준 사양입니다. 1차 정보는 공식 사이트에 있습니다.

• 공식 사이트: 디지털청 디자인 시스템 β판
• 라이선스·이용 조건: 이용 시 주의사항

대략적으로 말하면 다음이 체계적으로 정의되어 있습니다.

중요한 것은, 이것이 공개된 라이선스 조건 아래에서 일반에 배포되고 있으며, 민간 사이트에서도 이용할 수 있다는 점입니다. 행정 절차 사이트는 나이·환경·IT 숙련도와 관계없이 누구나 쓸 수 있어야 하므로, 대비와 글자 크기, 조작의 용이함이 검증된 뒤에 설계되어 있습니다. 그 축적을 민간 회사 사이트에서도 그대로 토대로 삼을 수 있습니다.

라이선스의 구체적인 조건

「오픈 라이선스」라고 한 마디로 넘기면, 실무에서 필요한 판단을 할 수 없습니다. 공식 이용 시 주의사항에서는 배포물 종류마다 라이선스가 나뉘어 제시되어 있습니다.

실무상 포인트는 두 가지입니다. 하나는 Figma 데이터나 코드 스니펫을 편집·가공해 자사 사이트에 넣는 사용 방식이라면 출처 표시는 요구되지 않는다는 것입니다. 회사 사이트 제작에서 이 디자인 시스템을 쓰는 경우, 거의 이 형태가 됩니다. 다른 하나는 편집·가공한 것을 「마치 디지털청이 작성한 듯한 형태」로 공표·이용해서는 안 된다고 명기되어 있다는 것입니다.

덧붙여, 이용한다고 해서 디지털청의 인정이나 승인이 주어지는 것은 아닙니다. 당사 역시 「디지털청 공인」이 아니라, 공개된 표준 사양을 민간용으로 응용하고 있다는 입장입니다. 위 라이선스 조건은 기사 작성 시점의 것이므로, 채택을 판단할 때는 반드시 공식 페이지에서 최신 조건을 확인하시기 바랍니다.

그림의 실선은 항상 성립하는 관계, 점선은 조건이 붙는 관계입니다(성립 조건은 상세 페이지의 관계별 설명에 적혀 있습니다). 관계 전체 목록(총 15건, 근거와 확신도 포함)과 주요 개념의 정의는 지식 맵 상세 페이지에 정리되어 있습니다(일본어). 데이터: JSON-LD / Turtle

2. 「토대로 삼는다」는 구체적으로 무엇을 하는가

「디자인 시스템을 토대로 삼는다」는 말은 편리하지만, 구현 단위는 여러 단계가 있습니다. 당사의 경우 다음 3계층으로 나눠 받아들입니다. 이 사이트(comcomponent.com) 자체가 이 구성입니다.

여기서 의식적으로 하지 않는 것도 적어 둡니다. 공식이 배포하는 컴포넌트 코드를 통째로 가져와 그대로 외부 의존으로 떠안는 구성은 하지 않습니다. 회사 사이트에 필요한 부품은 한정되어 있고, 전체 세트를 넣으면 사이트 로딩이 무거워질뿐더러 upstream 갱신을 따라가는 유지보수 비용이 발생하기 때문입니다. 필요한 부품만 사양에 맞춰 자체 구현으로 가진다는 판단입니다.

이 구성의 효과는 페이지를 추가할 때 드러납니다. 새 서비스 페이지를 하나 더 추가해도 버튼 형태도 제목 계층도 여백도 기존 페이지와 맞으므로, 「디자인을 어떻게 할까」를 매번 고민하지 않아도 됩니다.

3. 왜 저렴해지는가 ── 견적에서 디자인 공정이 사라진다

일반적인 홈페이지 제작 견적에는 디자인 관련 항목이 상당한 비중으로 들어갑니다. 중소기업 홈페이지 제작 비용 시세의 한눈에 보는 표에서는 독자 디자인을 포함한 구성이 30만 엔〜100만 엔 구간에 들어가지만, 이 구간 안에서 디자인 공정이 쌓이는 내역은 대략 다음과 같은 작업입니다.

견적서의 「디자인 일체」가 무엇을 포함하는지는 회사마다 다르므로, 비교할 때는 이 수준까지 열어 달라고 하는 편이 확실합니다(이렇게 읽는 방법은 비용 기사에서 자세히 다룹니다).

디자인 시스템을 토대로 삼으면 이 구도가 바뀝니다.

• 배색·글자 크기·여백·버튼 등의 기준은 처음부터 정해져 있다
• 「디자인 안을 여러 개 내서 고르고 수정한다」는 라운드가 원칙적으로 불필요해진다
• 디자이너의 감각에 의존하는 판단이 줄어들어 재작업이 일어나기 어렵다

즉 할인으로 싸게 하는 것이 아니라, 공정 자체가 줄어드니까 싸게 할 수 있다는 말입니다. 남는 공수는 본래 효과에 직결되는 부분 ── 무엇을 하는 회사인지가 전달되는 구성 만들기, 문장, 문의 동선 설계 ── 로 돌립니다. 전달되지 않는 사이트의 원인은 디자인이 아니라 구성에 있는 경우가 대부분이며, 이는 문의가 오지 않는 사이트에서 먼저 손봐야 할 3곳에서도 쓴 그대로입니다.

4. 왜 품질이 떨어지지 않는가 ── 오히려 안정된다

「디자인을 빼면 품질이 떨어진다」는 직감은, 처음부터 만드는 디자인을 전제로 한 것입니다. 표준화된 디자인 시스템을 쓰는 경우, 이야기는 반대가 됩니다.

첫째는 접근성입니다. 디지털청 디자인 시스템의 부품은 색 대비, 글자 크기, 포커스가 보이는 방식, 터치 조작의 용이함 같은 점을 배려해 설계되어 있습니다. 개별 프로젝트의 디자인에서 이 수준을 매번 확보하려면 그 자체에 검증 공수가 듭니다. 검증을 거친 부품을 쓰는 편이 결과적으로 품질이 안정됩니다.

둘째는 실제 운영 실적입니다. 행정 서비스는 스마트폰에 익숙하지 않은 사람부터 전문가까지, 매우 폭넓은 이용자가 실제로 쓰는 장면에서 운영되고 있습니다. 거기서 쓰이는 설계 규칙은 「겉모습이 새로운가」가 아니라 「누구나 헤매지 않고 쓸 수 있는가」로 단련된 것입니다. 회사 사이트에 오는 잠재 고객에게 중요한 것도 바로 그 성질입니다.

셋째는 일관성입니다. 페이지마다 버튼 형태나 제목 규칙이 흔들리는 사이트는 그것만으로 읽기 어려워집니다. 디자인 시스템을 따르면 페이지를 나중에 추가해도 구조와 톤이 무너지지 않습니다.

이 사이트 자체가 이 디자인 시스템을 토대로 구축되어 있습니다. 또한 제작 사례의 ドーズキャリーサービス 사이트의 리뉴얼도 같은 방침으로 구축했습니다. 리뉴얼 진행 방식 자체는 사례 기사에 자세히 정리되어 있습니다.

구체적으로 어떤 부품이 효과가 있는지는 실제 페이지를 비교해 보는 것이 빠릅니다. 이 사이트에서의 쓰임새를 들면 다음과 같습니다.

같은 부품을 다른 사이트에 적용한 것이 ドーズキャリーサービス입니다. 배색·사진·문장은 당연히 전혀 다르지만, 버튼의 누르기 쉬움이나 제목 계층이 붙는 방식이 같은 설계 규칙으로 되어 있다는 것은 나란히 보면 알 수 있습니다.

5. 표준화해도 「같은 겉모습」이 되지는 않는다

흔한 걱정은 「표준 디자인이면 다른 회사와 같은 모양이 되지 않을까」라는 것입니다.

표준화되는 것은 배색의 기준, 글자 크기의 체계, 부품의 설계 규칙 같은 토대 부분입니다. 사이트의 인상을 실제로 결정하는 것은 로고, 사진, 캐치프레이즈, 페이지 구성, 문장의 톤이며, 여기는 사이트마다 처음부터 만듭니다. 토대가 맞춰져 있는 것과 개성이 없는 것은 다른 이야기입니다.

한편 솔직히 전해야 할 것도 있습니다. 브랜드 표현으로서 공들인 독자 비주얼이나 애니메이션이 필요한 프로젝트에는 이 진행 방식은 맞지 않습니다. 예를 들어 세계관의 연출이 가치의 중심이 되는 브랜드 사이트나 캠페인 사이트가 이에 해당합니다. 그런 프로젝트에서는 디자인에 제대로 투자해 전문 디자인 회사에 의뢰하는 편이 좋은 결과가 됩니다. 당사 상담에서 그런 요청이 중심이라고 파악된 경우에는, 처음부터 솔직히 그렇게 말씀드립니다.

6. 정리

• 홈페이지 제작 비용 안에서, 처음부터 새로 하는 디자인 제작은 큰 비중을 차지한다
• 小村ソフト는 디지털청이 공개하는 디자인 시스템(공식 사이트)을 토대로 삼아 이 공정을 대폭 압축한다
• 라이선스는 배포물마다 나뉘며, Figma 데이터는 CC BY 4.0, 코드 스니펫은 MIT License. 편집·가공해 자사 사이트에 넣는 사용 방식이라면 출처 표시는 불필요
• 「토대로 삼는다」의 내용은 디자인 토큰의 공통화·부품의 CSS 클래스화·템플릿으로의 편입 3계층
• 저렴해지는 이유는 할인이 아니라 공정이 줄어드는 것. 남는 공수는 구성·문장·동선 설계로 돌린다
• 접근성을 배려해 설계되고 행정 서비스에서 실제 운영되는 표준 부품을 쓰므로, 품질은 오히려 안정된다
• 로고·사진·문장은 사이트마다 만들므로 같은 겉모습이 되지는 않는다. 다만 공들인 독자 비주얼이 필요한 프로젝트에는 맞지 않는다

비용을 억제하면서 전달되는 구성의 사이트를 만들고 싶은 경우에는, HP 제작 페이지에서 진행 방식과 가격을 확인할 수 있습니다. 현재 사이트 URL을 붙여 문의해 주시면, 무엇부터 손보면 효과가 나오기 쉬운지를 정리해 돌려드립니다.

관련 기사

• 중소기업 홈페이지 제작 비용 ── 시세 한눈에 보는 표와 견적 읽는 법
• 사이트 리뉴얼 사례: 미야자키의 운송 회사 ドーズキャリーサービス
• 문의가 오지 않는 사이트에서, 먼저 손봐야 할 3곳
• HP 제작

관련 기사

같은 태그를 공유하는 최신 기사입니다. 더 가까운 주제로 지식을 넓힐 수 있습니다.

관련 토픽

이 기사와 가까운 토픽 페이지입니다. 기사를 출발점 삼아 관련 서비스와 다른 기사로 이어집니다.

이 주제와 연결되는 서비스

이 기사는 다음 서비스 페이지로 이어집니다. 가까운 입구부터 확인해 주세요.

자주 묻는 질문

이 기사 주제에 대해 상담 시 자주 나오는 질문을 모았습니다.

디지털청 디자인 시스템을 민간 회사 사이트에 사용해도 됩니까?

네. 디지털청 디자인 시스템은 디지털청이 오픈 라이선스로 일반 공개하고 있으며, 행정기관 이외의 사이트에서도 이용할 수 있습니다. 다만 이용한다고 해서 디지털청의 인정이나 승인이 부여되는 것은 아닙니다. 당사 역시 공개된 디자인 시스템을 민간 사이트에 응용하고 있다는 입장입니다.

표준 디자인이면 다른 회사 사이트와 같은 모양이 되지 않습니까?

배색·여백·부품의 설계 규칙이 공통이 될 뿐이고, 로고, 사진, 캐치프레이즈, 페이지 구성은 사이트마다 만듭니다. 실제 인상을 결정하는 것은 주로 이 부분이므로, 표준화해도 「어디선가 본 똑같은 사이트」가 되지는 않습니다. 반대로 버튼의 누르기 쉬움이나 글자의 읽기 쉬움처럼 맞춰져야 할 부분이 맞춰지는 것이 표준화의 효과입니다.

저자 프로필

기사 저자의 프로필 페이지입니다.

Go Komura

합동회사 코무라소프트 대표

Windows 소프트웨어 개발, 기술 상담, 장애 조사를 중심으로 재현이 어려운 장애 조사와 기존 자산이 남아 있는 프로젝트에 강점이 있습니다.