디자인 맥락과 AI 리더블
2026년 7월 2일 공유
한 줄 요약
설계 의도와 AI 도구를 활용해 생산성을 높이는 방법에 대해 발표한다.
목차
[00:00] 의도와 목표 설정
[00:30] 소프트웨어 개발과 의도
[01:00] 프론트 플랫폼 설계
[01:34] 고려 의무와 실제화
[02:05] 올바른 제품 제공
[02:37] 의도와 실행
[03:09] 생산 효율성과 명세
[03:40] 디자인 시스템과 토큰
[04:14] UI 컴포넌트와 Code Connect
[05:19] 동적 콘텐츠와 재사용
[06:21] 간단 설명 vs 상세
[06:55] 코드 생성과 컨텍스트
[07:26] AI 효율
[08:01] Code Connect의 발전
[08:33] 디자인 추상화와 하이퍼 토큰
[09:05] 스타일 프래그먼트
[10:15] 강타이핑 스키마
[10:45] 예시
[11:18] 컴파일링
[11:51] 인사이트
[12:23] 커뮤니티 이벤트
[12:54] 스킬과 에이전트
[13:25] 스킬 관리
[13:56] 컨텍스트 소스
[14:26] 다중 스킬
[14:57] 피처와 예제
[15:31] 시각화와 명확성
[16:02] FigJam과 코드 생성
[16:33] 과제와 훈련
[17:04] 완벽 목표는 아니라
[17:36] 단일 소스
핵심 메시지
- 의도와 명확성을 최우선으로 해야 설계와 개발이 효율적이다.
- Code Connect와 하이퍼 토큰 등 명확한 컨텍스트 제공이 AI 코드 품질을 크게 향상한다.
- 에이전트에 대한 스킬과 소스 관리는 지속적인 개선과 재사용을 가능케 한다. 주요 내용
의도와 목표 설정
- 목표가 없으면 프로세스가 방해받는다.
- 디스크리블한 프롬프트가 더 좋은 결과를 만든다.
소프트웨어 개발과 의도
- 낮은 투자는 장기 유지보수에 큰 마찰을 낸다.
- 프론트 플랫폼 설계가 대안임을 제시.
프론트 플랫폼 설계
- API, 결정론적 레이어, 구조화된 컨텍스트 투자가 필요.
고려 의무와 실제화
- 의도를 명확히 하면 인지적 포기 경향을 줄일 수 있다.
올바른 제품 제공
- 잘못된 제품 배송은 비용이 크다.
- divergent thinking → convergence 과정 필요.
생산 효율성과 명세
- 스펙 주도 개발이 LLM 활용 효과를 높임.
디자인 시스템과 토큰
- 디자인 토큰이 원시 값보다 정확하고 정보를 두 배로 압축.
UI 컴포넌트와 Code Connect
- 짧은 명세로 LLM에게 필요한 코드 생성 지시.
동적 콘텐츠와 재사용
- 슬롯을 사용해 동적 내용 전달 가능.
간단 설명 vs 상세
- 과도한 정보는 비효율적이라서 필요 시 간결하게 전달.
코드 생성과 컨텍스트
- 명확한 컨텍스트가 AI가 더 많은 코드를 작성하도록 함.
AI 효율
- 덜 많은 총 코드, 낮은 AI 사용률 → 더 효율적.
Code Connect의 발전
- 프레임워크 무관 API와 슬롯, NCP 툴 출시.
디자인 추상화와 하이퍼 토큰
- 스타일 프래그먼트 하나로 복수 속성 대체 가능.
스타일 프래그먼트
- CSS 블록 대신 하나의 명명된 값으로 관리.
강타이핑 스키마
- 단일 소스로 모든 디자인 시스템 생성.
예시
- JSON 스키마와 하이퍼 토큰 구조 시연.
컴파일링
- 단일 소스를 모든 라이브러리와 문서에 변환.
인사이트
- 하이퍼 토큰이 디자인 사고를 색인화.
커뮤니티 이벤트
- 디자인 시스템 해그에서 토론.
스킬과 에이전트
- 에이전트에 전문 지식 부여를 위해 스킬 활용.
스킬 관리
- 수동 업데이트 어려워 에이전트 변환 필요.
컨텍스트 소스
- 한 번에 업데이트하면 에이전트가 스킬 재생성.
다중 스킬
- 하나의 소스에서 여러 에이전트용 스킬 컴파일.
피처와 예제
- 시각화된 캔버스에 지식 구조화.
시각화와 명확성
- FigJam을 통해 LLM이 이해하기 쉬운 컨텍스트 제공.
FigJam과 코드 생성
- 과제 형태로 에이전트에게 Code Connect 작성 시키는 방법.
과제와 훈련
- 에이전트가 예시와 비교해 학습하도록 설계.
완벽 목표는 아니라
- 경험과 피드백을 통해 지속적 개선 강조.
단일 소스
- 유지보수와 재생성을 위한 중앙 관리. 챙길 것
- Code Connect 템플릿 API와 하이퍼 토큰을 활용해 디자인 시스템 자동화를 구현.
- FigJam에 정의된 스킬을 통해 에이전트가 재생성할 수 있는 단일 소스 트루스 구축. 설명 스크립트 이 세션에서는 설계 의도와 AI 도구를 활용해 개발 생산성을 높이는 방법을 알려줬어요. Code Connect와 하이퍼 토큰 같은 명확한 컨텍스트 제공이 코드 품질을 크게 향상시키는 것이 강조되었고, 에이전트 스킬을 한 곳에서 관리해 지속적으로 개선할 수 있다는 점도 소개됐죠. 여기서 가져갈 수 있는 인사이트는 ‘의도를 명확히 하고 컨텍스트를 체계적으로 제공하면 AI가 더 효율적으로 동작한다’는 것이에요.