MAEK 디자인 시스템

MAEK의 화면은 AI가 만든 답을 포장하기보다 원천 자료, 맥락, 검증 기준을 함께 보여줍니다. 사용자는 결과를 믿기 전에 그것이 어디서 왔고 어떤 업무 판단에 쓸 수 있는지 확인할 수 있어야 합니다.

핵심 원칙

AI 화면은 답보다 먼저 근거와 책임 범위를 보여줘야 합니다.

MAEK의 디자인 기준: AI 결과는 그 자체로 완성된 답이 아닙니다. 사용자가 원천 자료, 판단 맥락, 권한, 다음 행동을 함께 확인할 수 있을 때 업무에 들어갈 수 있습니다. 그래서 MAEK의 디자인 시스템은 장식보다 읽기 쉬운 구조, 넓은 여백보다 명확한 근거, 기능 소개보다 실제 실행 흐름을 우선합니다.

  • 도구보다 사람의 판단 AI 전환의 시작점은 기술이 아니라 사람입니다. 직원들은 낯선 프롬프트와 바이브코딩 사이에서 매일 새로운 방식을 익히고, 리더는 뒤처지지 않기 위해 빠르게 판단해야 합니다. 우리는 조직 구성원이 불안이 아니라 이해를 바탕으로 AI를 사용할 수 있도록 돕습니다.
  • 데모보다 실제 업무 AI는 멋진 데모보다 실제 업무에서 작동해야 합니다. 보고서, 기획, 개발, 고객 대응, 운영 업무처럼 반복되는 일 속에서 AI가 어디에 도움이 되는지 찾고, 바로 사용할 수 있는 워크플로우로 바꿉니다.
  • 리더와 팀의 기준 정렬 CEO는 방향을 고민하고, 실무자는 기준을 묻습니다. AI를 어디까지 도입할지, 어떤 결과물을 신뢰할지, 누가 검토하고 책임질지를 함께 정리해야 조직이 같은 속도로 움직일 수 있습니다.
  • 작게 검증하고 확장 AI 변화는 너무 빠르고, 정보는 너무 많습니다. 우리는 조직이 유행을 따라가기보다 필요한 것부터 작게 시작하고, 검증하고, 확장할 수 있도록 돕습니다. 빠르지만 무리하지 않고, 신중하지만 멈추지 않는 전환을 만듭니다.

적용의 막막함

AI 교육은 들었지만, 막상 보고서·기획·고객 대응·개발 업무에 어떻게 연결해야 할지 모릅니다.

배운 것은 많은데, 실제 업무로 옮기는 기준이 없습니다.

팀 안의 격차

어떤 직원은 AI로 업무 속도를 높이고, 어떤 직원은 아직 첫 프롬프트도 어렵게 느낍니다.

조직 안에서 AI 활용 수준의 차이가 점점 커집니다.

기준의 부재

리더는 어디까지 도입할지 고민하고, 실무자는 어디까지 믿고 써도 되는지 묻습니다.

방향은 있지만, 함께 따를 기준은 아직 명확하지 않습니다.

낯선 개발 언어

footer, header, popup, modal, API key, Next.js.

어려운 기술 용어는 아닌데도, 익숙하지 않은 단어들이 계속 쏟아지면서 작은 수정 하나에도 긴장하게 됩니다.

모두가 빠르게 배우고 있지만, 따라가는 것만으로도 이미 많은 에너지를 쓰고 있습니다.

What teams can build

작은 사례를 많이 보면서 감을 잡습니다.

AI를 어디에 써야 할지 모를 때는 거창한 전략보다 바로 눈앞의 예시가 먼저 필요합니다. 보고서, 기획, 고객 대응, 개발 요청, 배포까지 실제 업무 단위로 쪼개 보여줍니다.

01

보고서

회의록과 자료를 넣으면 요약, 목차, 핵심 주장, 근거 문장을 함께 정리합니다.

02

기획

아이디어가 흐릿할 때 목표, 대상, 기능, 일정, 우선순위를 질문하며 기획안 형태로 바꿉니다.

03

고객 대응

자주 들어오는 문의를 상황별 답변 템플릿으로 만들고, 말투와 책임 범위를 맞춥니다.

04

개발 요청

footer, modal, API key처럼 낯선 단어가 나와도 수정 요청을 개발자가 이해할 문장으로 바꿉니다.

05

운영 체크

반복 업무를 체크리스트, 승인 흐름, 담당자 메모로 정리해 놓치는 일을 줄입니다.

06

교육 자료

부서별 수준에 맞춰 실습 예제, 용어 설명, 따라 해볼 과제를 작게 나눕니다.

07

배포 준비

도메인, 환경 변수, 저장소, 권한, 테스트 URL처럼 배포 전에 필요한 항목을 점검합니다.

08

내부 확산

잘 된 예시를 사내 템플릿으로 남기고, 다음 팀이 그대로 시작할 수 있게 만듭니다.

모르는 단어를 넘기지 않게 합니다.

Living glossary

용어집은 사전처럼 멀리 떨어져 있으면 잘 쓰이지 않습니다. 직원이 막히는 순간 바로 찾고, 지금 보고 있는 화면과 연결해서 이해할 수 있어야 합니다.

그래서 footer, header, popup, modal, API key, Next.js 같은 기본 단어를 짧은 설명, 그림, 실제 수정 사례와 함께 보여주는 방식이 필요합니다.

Support toolkit

설명보다 바로 써볼 수 있는 도구가 필요합니다.

교육 자료만 쌓이면 다시 막막해집니다. 용어, 그림, 템플릿, 질문 흐름을 한 화면에서 연결해 다음 행동으로 넘어가게 만듭니다.

쉬운 용어집

header, footer, popup, modal, API, prompt 같은 단어를 업무 상황 안에서 바로 찾아볼 수 있게 정리합니다.

그림 용어집

말로만 들으면 헷갈리는 흐름을 화면, 화살표, 전후 비교로 보여줘 비개발자도 맥락을 잡게 합니다.

업무 템플릿

보고서, 기획안, 고객 답변, 회의 정리, 개발 수정 요청을 바로 복사해 쓸 수 있는 형태로 제공합니다.

역방향 프롬프팅

내가 뭘 원하는지 설명하지 못할 때 AI가 목적, 대상, 제약, 결과물 형식을 먼저 물어보게 만듭니다.

MAEK system flow diagram used as evidence media in the design system.
그림으로 보는 용어집: 데이터, 화면, 질문, 결과물이 어떻게 이어지는지 한 장에서 확인합니다.

무엇을 만들지 모를 때

AI가 먼저 묻습니다. 누구를 위한 결과물인가요? 오늘 바로 필요한 건 초안인가요, 의사결정인가요, 실행 체크리스트인가요?

용어가 막힐 때

AI가 단어를 설명하는 데서 멈추지 않고, 지금 화면에서 그 단어가 어디에 있고 무엇을 바꾸는지 함께 보여줍니다.

배포가 어려울 때

AI가 회사의 도메인, 저장소, 보안 규칙, 승인 절차를 확인하고 지금 환경에서 가능한 배포 경로를 제안합니다.

Deployment support

회사 환경에 맞게 끝까지 올리는 절차.

  1. 01

    먼저 회사가 이미 쓰는 도구를 확인합니다: GitHub, Vercel, Cloudflare, 사내 서버, 도메인, 계정 권한.

  2. 02

    테스트 URL을 만들고, 실제 화면에서 깨지는 지점과 수정해야 할 문구를 함께 점검합니다.

  3. 03

    환경 변수, API key, 이미지, sitemap, 검색 등록 파일처럼 배포에서 자주 막히는 항목을 체크합니다.

  4. 04

    대표님과 실무자가 같은 화면을 보며 승인할 수 있도록 변경 내역과 확인 기준을 짧게 남깁니다.

  5. 05

    배포 후에도 수정, 롤백, 검색 등록, 내부 공유까지 이어지는 운영 절차를 정리합니다.