디자인

보기 좋게 통일되고 누구나 쓰기 쉬운 웹 페이지 화면(UI) 만들기

웹사이트 화면을 만들거나 다시 볼 때 사용합니다. 먼저 눈에 띌 내용, 여백, 글자 크기, 색, 다시 쓰는 버튼 같은 부품, 눌렀을 때의 반응을 정하고, 공개 전에 누구나 쓸 수 있는지와 로딩 속도를 숫자로 확인합니다.

디자인 규칙에 맞춰 UI 컴포넌트 라이브러리를 만들고 고치기

타입이 지정된 UI 컴포넌트 라이브러리에 AI로 컴포넌트를 추가하거나 고칠 때 사용합니다. 먼저 사양을 읽고, 공통 디자인 값을 쓰고, 키보드 조작과 접근성을 테스트하고, 문서와 데모를 맞추고, 모든 검사를 통과시킵니다.

큰 결정 전에 짧은 스프린트로 프로토타입을 만들어 사용자에게 시험하기 (디자인 스프린트)

경험, 서비스, 메시지에 대한 불확실성 때문에 중요한 결정이 막혀 있을 때 사용합니다. 질문과 결정할 사람 한 명을 정하고, 각자 따로 아이디어를 스케치하고, 진짜처럼 보이는 프로토타입을 만들어 사용자와 한 명씩 시험한 뒤 다음 단계를 정합니다.

원하는 분위기에 맞는 템플릿을 골라 HTML 프레젠테이션을 만드세요

내용 개요로 슬라이드를 만들 때 사용합니다. 쓰는 자리와 분위기를 묻고, 실제 내용을 넣은 제목 슬라이드 미리 보기 3개를 보여 준 뒤, 고른 템플릿의 모양을 바꾸지 않고 모든 슬라이드를 채우며, 파일마다 브라우저에서 확인합니다.

AI 에이전트용 디자인 도구를 만들고 명령과 검사를 정리하기

AI 에이전트가 쓰는 디자인 도구를 만들거나 고칠 때 쓴다. 프로젝트 설정을 읽고 브랜드용인지 앱 화면용인지 물은 뒤, 각 명령을 한 곳의 자료에 연결하고, 색과 글쓰기 규칙을 지키고, 새 버전 출시를 평소 작업과 나누고, 새 디자인 검사는 테스트를 먼저 써서 만든다.

UI 컴포넌트 라이브러리를 고치고, 망가진 곳이 없는지 확인하기

다시 쓰는 UI 컴포넌트를 한 저장소(모노레포)에 모아 두고 AI에게 고치게 할 때 사용합니다. 저장소의 명령과 패키지 구분을 지키고, 고치는 방법을 알려 주는 오류 메시지를 쓰고, 실제 사용자처럼 테스트하고, 접근성과 스크린샷을 확인하고, API 문서를 다시 만듭니다.

장애가 있는 사람도 쓸 수 있는 앱과 웹사이트 설계하기(접근성)

앱이나 웹사이트를 설계할 때 사용합니다. 시각, 청각, 움직임, 이해 면에서 작업이 막히는 곳을 찾고, 대비, 보조 도구, 자막, 키보드 조작, 깜박임을 점검하며, 출시 전에 테스트합니다.

앱과 명령줄로 쓰는 제품의 코드 저장소를 정리된 상태로 유지하기

앱과 명령줄로 쓰는 제품의 큰 코드 저장소에서 AI가 작업할 때 쓴다. 규칙 문서를 순서대로 읽고, 각 부분의 코드를 제자리에 두며, 새 기능을 앱과 명령줄 양쪽에 넣고, 가장 가벼운 테스트로 변경을 확인하고, 내보내기 전에 배포할 버전을 확인한다.

디자인 시스템 문서를 만들고 최신 상태로 유지하기

팀의 디자인 시스템을 문서로 정리할 때 쓴다. 쓸 범위를 정하고, 우선순위에 따라 페이지로 나눠 쓰며, 구성 요소마다 무엇인지·왜·언제·어떻게 쓰는지를 설명하고, 출시 전에 문서와 디자인, 코드가 맞는지 확인한다.

AI가 잘 쓸 수 있는 디자인 시스템을 만들고, AI가 만든 컴포넌트 확인하기

AI가 화면을 만들 때 쓰는 디자인 시스템을 만들거나 고칠 때 쓴다. 현재 브랜치의 문서를 먼저 읽고, 스타일 도구가 실제로 지원하는 CSS만 쓰며, 문서를 구현과 맞추고, AI가 컴포넌트를 제대로 만드는지 테스트한다.

어디서 봐도 같은 브랜드로 알아보도록 브랜드 규칙 만들기

브랜드의 모습과 말투를 만들거나 새로 고칠 때 쓴다. 브랜드의 목적과 가치에서 시작해 보기 쉬움(접근성)까지 고려한 로고·색·글꼴·배치 규칙을 정하고, 자료를 한곳에 모아 팀이 쓰기 쉽게 하며, 점검과 측정으로 규칙을 고쳐 나간다.

능력과 언어가 다른 사람도 참여하는 디자인 조사 계획하기

디자인을 정하려고 사용자 이야기를 듣는 조사를 시작하기 전에 쓴다. 목표를 결정과 연결하고, 조사 방법과 역할을 정하고, 능력과 언어가 다른 사람을 모으고, 참여자를 보호하고 사례를 주며, 기록 속 개인정보를 지킨다.

고객이 처음 알게 된 때부터 재계약까지의 여정을 그리고 개선 순서를 정한다

고객이 일찍 떠나거나 일부 고객의 만족도가 낮을 때 사용한다. 사업 종류, 대상 고객, 그릴 범위를 묻고, 단계마다 고객이 생각하고 느끼는 것, 막히는 곳, 담당자가 정해진 우선순위 개선안을 고객 여정 지도로 제시한다.