디자이너
공통 UI를 처음부터 따로 설계하지 않습니다.
개발·퍼블이 제공하는 공통 룰을 기준으로 시안을 잡고, 고객사마다 달라지는 색·높이 정도만 맞춥니다.
기대 효과 Figma에 공통 컴포넌트를 미리 두어 중복 디자인 줄이기
고객사 관리자 화면을, 담당자나 도구가 바뀌어도 같은 방식으로 넘기고 고칠 수 있게 만드는 사내 UI 작업 기반을 갖춘다.
현장에서 화면 하나를 끝내려면 디자이너, 퍼블리셔, 프론트 개발자, PM이 번갈아 손을 댑니다. 지금은 시안·채팅·개인 습관에 기대는 부분이 커서, 같은 일을 해도 결과물과 인수인계 방식이 제각각이기 쉽습니다. 키위즈 UI STUDIO는 그 과정을 역할별로 나누고, 샘플과 문서로 고정해 둡니다.
누가 무엇을 만들어 누구에게 넘기는지, 기존 방식과 나란히 놓았습니다.
UI를 통째로 다시 만드는 비중은 줄지만, 개발 작업 자체가 없어지는 것은 아닙니다.
공통 UI를 처음부터 따로 설계하지 않습니다.
개발·퍼블이 제공하는 공통 룰을 기준으로 시안을 잡고, 고객사마다 달라지는 색·높이 정도만 맞춥니다.
기대 효과 Figma에 공통 컴포넌트를 미리 두어 중복 디자인 줄이기
"대충 비슷하게" 그린 뒤 넘기지 않습니다.
개발이 그대로 이어받을 수 있는 시안 화면을 같은 뼈대로 만듭니다.
시안을 백지에서 다시 그리지 않습니다.
퍼블 결과물을 바탕으로 API 연동·업무 로직을 이어 갑니다. AI를 쓰기 어려운 고객사·내부 환경에서도 사람이 읽고 고칠 수 있는 구조를 전제로 둡니다.
현황을 채팅에만 기대지 않습니다.
"퍼블이 어디까지 됐는지", "프론트가 어느 시안 버전을 반영했는지"를 Workbench 현황으로 같이 맞춰 봅니다.
샘플은 저장소의 현재 판을 실행해 그대로 캡처한 화면입니다. 화면을 누르면 크게 볼 수 있습니다.
이 순서는 위의 화면 하나가 완성되는 흐름 그림 그대로입니다. 단계마다 맡는 사람과 넘기는 결과물이 정해져 있습니다.
새 화면은 이 중 가장 가까운 패턴의 샘플을 따라 만듭니다. 사람이 하든 AI가 하든 같은 가이드를 봅니다.
이 동작들은 화면마다 따로 만든 것이 아니라 공통 부품과 샘플에 들어 있습니다.
새 목록·등록 화면도 같은 샘플을 따라 만들기 때문에, 누가 만들어도 같은 동작이 나옵니다.
비교 대상: 빈 프로젝트(또는 UI 부품만 깔아 둔 프로젝트)에서 Cursor·Claude 등으로 화면을 바로 만들어 내는 방식
둘 다 프롬프트만으로 목록·폼·버튼이 있는 화면을 빠르게 띄울 수 있습니다. 숙련자가 AI를 잘 쓰면 첫 초안 속도도 크게 뒤지지 않을 수 있고, 요구가 바뀌면 결국 사람이 보고 고쳐야 하는 것도 같습니다.
그래서 "AI로 화면을 더 잘 만든다"보다, 만든 다음에도 누가 넘기고, 어디를 고치고, 현황을 어떻게 맞출지가 정해져 있느냐로 보는 편이 맞습니다.
| 질문 | 빈 프로젝트 + AI | 키위즈 UI STUDIO |
|---|---|---|
| 같은 화면을 두 사람이, 또는 AI가 두 번 만들면? | 폴더·버튼 위치·짜는 방식이 어긋나기 쉽습니다. | 샘플·가이드를 기준으로 뼈대를 맞춥니다. |
| 결과물을 현장에서 사람이 고쳐야 하면? | AI 특유의 긴 코드·중복이 섞이면 수정이 부담됩니다. | 실무자가 따라 할 수 있는 짧은 패턴을 전제로 둡니다. 고객사 등 AI 사용이 어려운 경우를 염두에 둡니다. |
| 고객사 시안(색·높이)이 바뀌면? | 화면 파일을 찾아다니며 고치기 쉽습니다. | 공통은 토큰·공통 UI에서, 화면만의 배치는 해당 시안에서만 고칩니다. |
| 퍼블이 끝나면 개발은? | 참고용으로만 두고 화면을 다시 구현하는 경우가 많습니다. | 시안을 출발점으로 API·로직 개발을 이어 가며, 적용 버전을 남깁니다. |
| 규칙에 어긋난 코드는 언제 아나? | 리뷰·장애·인수인계 때 늦게 나오는 경우가 많습니다. | 작업할 때 가이드와 영역 규칙으로 맞추고, 현황은 Workbench에 남깁니다. 일부 기대 효과 자동으로 막는 범위는 아직 보강 중입니다. |
| 내부·외부 진행은 어떻게 맞추나? | 채팅·회의·개인 메모에 흩어지기 쉽습니다. | Workbench 현황으로 퍼블 최신과 프론트 반영 여부를 같이 봅니다. |
아래 "다음"은 모두 기대 효과이며 아직 하지 않은 일입니다.
지금Figma 공통 컴포넌트는 아직 없습니다. 개발·퍼블 공통 룰을 디자인에 제공해 맞추는 단계입니다.
다음 기대 효과Figma에 공통 컴포넌트를 미리 두어 중복 디자인을 줄입니다.
지금Figma 값을 토큰에 넣는 일이 아직 손작업입니다.
다음 기대 효과넣는 과정을 더 줄입니다.
지금규칙을 어긴 코드를 막는 장치가 가이드·리뷰에 많이 기대고 있습니다.
다음 기대 효과더 일찍 걸러 주는 쪽을 보강합니다.
지금 UI Studio는 개발자가 공통 값을 하나씩 바꿔 보는 도구입니다. 새 기획은 디자이너·PM이 고객사 테마를 정하고, 표준 화면으로 확인받고, 파일 하나로 넘기는 흐름을 목표로 합니다.
손잡이를 바꾸면 오른쪽 표준 화면이 바로 바뀝니다. 아래 점검은 주색 버튼의 흰 글씨 대비를 실제로 계산합니다(웹 접근성 기준 4.5:1). 주황을 고르면 경고가 뜹니다.