DesignxAI Study · Bryan Oh

Small teams · shorter loops

THINK BY BUILDING

UX Engineer — turning ideas into working products.

bryan@garage~ % prototype-first · Jul 15, 2026

00 / The hook

official figures

Gamma는 50명 중12명이 디자이너다.이 숫자가 팀을 설명한다.

AI 프레젠테이션 회사 Gamma는 팀의 4분의 1이 디자이너다. 이 50명 팀이 $100M ARR과 7,000만 유저를 만들었다.

Signal check

Not an outlier

Gamma는 예외가 아니다. 비슷한 팀 구조가 여러 제품 조직에서 나타나고 있다.

Google

수년째 UX Engineering을 별도 커리어 트랙으로 운영한다. 역할 설명은 “디자인과 엔지니어링의 접착제”다.

Stripe · Vercel

design engineer 팀/pod을 따로 두고, 핸드오프 없이 코드까지 만든다.

Cursor

Cursor · Codex

작은 팀에 디자이너를 더 가까이 붙여 제품을 빠르게 출시한다.

AI가 디자인을 없애는 게 아니다. 디자인 책임이 제품 안쪽으로 들어간다.

Part I / Small Teams, Shorter Loops

Why this role · why now

작은 팀은 어떻게
큰 결과를 만드는가.

강점은 단순히 인원이 적다는 데 있지 않다. 아이디어가 실제 제품까지 가는 거리가 짧다. UX Engineer는 그 거리를 줄이는 역할이다.

01 / The real advantage

Fewer handoffs · shorter loops

작은 팀은
사람이 적어서 빠른 게 아니다.

리서치, 디자인, 구현 사이의 handoff가 적다. 문제를 이해한 사람이 직접 만들어 보고, 결과를 확인한 뒤 바로 다음 결정을 내린다.

02 / Why now

코드보다 결정이 어려워졌다

Code gets cheap.

Judgment gets expensive.

새로 생긴 병목

AI 덕분에 코드를 만드는 비용은 훨씬 낮아졌다. 이제 팀을 늦추는 건 구현법보다 무엇을 왜 만들지 결정하는 일이다. 저는 그 판단을 디자인으로 본다.

코드는 빨라졌다판단은 여전히 어렵다취향은 맡길 수 없다

03 / Working definition

Design · code · behavior

UX Engineer는 경험을 코드로 생각하고, 실제 사용에서 검증해 제품으로 마무리한다.

△

Design

문제와 우선순위를 경험 원칙으로 정리한다.

{ }

Code

코드를 최종 산출물로만 보지 않고, 탐색할 수 있는 디자인 매체로 쓴다.

↯

Behavior

상태·지연·실패·회복이 실제 흐름에서 어떻게 느껴지는지 본다.

04 / Role landscape

Different titles · same goal

타이틀은 달라도 목표는 같다. 모호한 아이디어를 실제로 써볼 수 있게 만든다.

01

UX Engineer

사용 흐름과 인터랙션을 코드로 확인한다.

02

Design Engineer

craft와 구현 품질까지 끝까지 챙긴다.

03

Product Engineer

문제 정의부터 출시까지 넓게 맡는다.

04

AI Interaction

확률적 행동과 사람의 통제 사이를 설계한다.

05 / Job descriptions

채용공고에서 보이기 시작한 표현

채용공고가 먼저 달라졌다.

2022년 JD에 거의 없던 표현이 지금은 핵심 요건으로 들어간다.

JD.01

“prototype in code”

와이어프레임보다 실제 동작으로 탐색한다.

JD.02

“AI-native”

모델에 가깝게 설계하고 확률적 behavior까지 다룬다.

JD.03

“vibe coding”

live JD에서 반복해서 등장하는 핵심 역량이 됐다.

JD.04

“Conversational AI UX Designer”

대화형·에이전트 경험을 전담하는 직함도 생겼다.

JD.05

확률적 UI · 환각 완화 · 우아한 실패

실패해도 사용자가 복구할 수 있게 설계한다.

06 / Role timeline

여러 회사가 공식적으로 쓰기 시작했다

몇 년 사이, 이 역할은 이름과 조직을 얻었다.

수년 전

Google, UX Engineering 커리어 트랙 운영

별도 커리어 트랙

2023

Linear가 이 역할을 공식 명명

제품 craft를 코드로

2024

Vercel, Design Engineering 매니페스토

설계 · 구현 · 출시

2025

Stripe가 전용 pod로 분리

Design 조직 산하

2026

a16z, Design Engineer Fellowship 신설

신흥 직군 육성

07 / The market is naming it

Official language · 2024–2026

The work came first.
The title followed.

Vercel

문제 이해부터 설계·구현·출시까지 한 사람이 자율적으로 맡는다.

Stripe

Design 조직 안에서 콘셉트·프로토타입·빌드를 함께 맡긴다.

a16z

a16z Build

시스템을 만드는 AI-native 리더를 신흥 직군으로 소개한다.

08 / Small Teams, More Surface

Leverage changes the org chart

작은 팀일수록 한 사람이 더 넓은 제품 surface를 맡는다.

¼

Gamma

직원 약 50명, 그중 1/4이 디자이너. $100M ARR · 7,000만 유저 · 1인당 매출 $2M+ · 2년+ 흑자.

300+
Cursor

Cursor

2025년 공식 발표 기준 300명 이상의 팀이 $1B annualized revenue를 만들었다.

3→7

OpenAI

Codex가 모든 코드를 작성한 실험은 엔지니어 3명으로 시작해 7명으로 커졌다. 팀은 손으로 쓸 때보다 약 1/10의 시간에 제품을 만들었다고 추정했다.

Linear · Vercel · Stripe · Anthropic · Browser Company · Granola · Replit · Ramp에서도 비슷한 구조가 보인다. design engineer가 제품과 코드 가까이에서 움직인다.

09 / The work is moving

Fading ↘ · rising ↗

목업을 전달하는 일은 줄고, 실제 동작과 결과를 맡는 일은 늘고 있다.

↓ 줄어드는 일

UX 리서처 채용 -71% (2022년 대비)전문화된 리서치 직무 축소
픽셀 퍼펙트 목업. “한 달 완벽”보다 “이번 주 출시”목업보다 실제 동작
핸드오프 프로세스. 스케치 후 코드로 직접 반복전달보다 끝까지 책임
독립 산출물로서의 와이어프레임문서보다 실행물
Figma 숙련만으로 차별화하기 어려움 (공고의 85%+가 요구)툴 숙련은 기본값

↑ 늘어나는 일

라이브 프로토타입이 곧 스펙 (핸드오프 없이)함께 만지는 실행물
디자이너가 AI를 지휘하고 최종 결과까지 책임지휘하고 검증
취향과 판단. “화면이 아니라 시스템으로 사고”취향과 시스템 사고
GTM · 사용자 이해 등 전략적 판단의 비중 확대전략 판단 확대
Super IC: 전략·디자인·엔지니어링을 넘나드는 개인넓어진 역할 범위

10 / The boundary

슈퍼히어로가 아닌, 책임의 모델

UX Engineer가 모든 일을 혼자 하지는 않는다. 대신 중요한 경계가 끊어지지 않게 붙잡는다.

이 역할이 아닌 것

Figma를 코드로 옮기는 사람
프론트엔드의 빈자리
혼자 일하는 슈퍼히어로

실제로 맡는 것

의도가 동작까지 이어지는 흐름
인터랙션 품질과 판단 근거
팀이 함께 검토할 실제 화면

11 / The job to be done

아이디어를 결정 근거로 만든다

결과물은 화면이 아니다. 더 빠르고 나은 제품 결정이다.

01

Frame

문제를 테스트 가능한 가설로 만든다.

02

Prototype

핵심 행동을 실제 환경과 가깝게 만든다.

03

Observe

느낌 대신 사용과 계측을 본다.

04

Polish

상태·지연·입력·접근성을 다듬는다.

05

Ship

시스템에 넣고 실제 제품으로 출시한다.

코드는 매체다.결과는 더 나은 제품 결정이다.

12 / Skill stack

Depth somewhere · fluency across

전부 깊게 알 필요는 없다. 대신 네 영역의 언어를 오갈 수 있어야 한다.

UX.01

Judgment

문제 framing, 정보 구조, interaction taste를 다룬다.

CODE.02

Literacy

브라우저·component·state·API를 읽고 고친다.

SYS.03

Leverage

design system과 primitive로 반복 작업을 줄인다.

VAL.04

Validation

사용 관찰·계측·accessibility·performance를 확인한다.

Open Discussion #1

Two short shares

팀에서 디자이너와 엔지니어의 경계가
실제로 흐려진 순간이 있었나요?

채용, 협업, ownership 중 하나만 떠올려도 좋습니다. 짧게 두 분만 들어볼게요. (1~2분)

RoleWorkOwnership

Part II / Think by Building

The design surface moved

디자인이 사라진 게 아니다.디자인하는 장소가 바뀌었다.

“화면을 넘기는 대신, 브라우저에서 함께 보고 결정한다.”
PROCESS DIAGRAM → WORKING PRODUCT

13 / The evidence changed

과정 그림보다 직접 써볼 수 있는 증거

예전 UX 포트폴리오엔
Double Diamond가 빠지지 않았다.
요즘은 보기 어렵다.

프로세스가 없어진 건 아니다. 보여주는 증거가 달라졌다.

THEN과정 다이어그램 · 리서치 산출물 · 완성된 목업

NOW출시된 제품 · 라이브 프로토타입 · 유지할 수 있는 시스템

Double Diamond model showing Discover, Define, Develop, and Deliver
User-provided NN/g adaptation · Double Diamond: Discover → Define → Develop → Deliver

14 / The role

Designer first · able to ship

I didn’t become a developer.
I became a designer who can ship.

모든 코드를 직접 작성하지는 않습니다. 대신 무엇을 만들지 정하고, AI가 만든 결과를 읽고 실행해 보며 제품으로 마무리합니다.

AI가 맡는 실행

component와 page structure 초안
반복적인 구현과 routine fix
정해진 범위 안에서 빠른 variation

제가 끝까지 맡는 판단

제품 의도와 정보 구조
디자인 시스템과 interaction quality
무엇을 출시하고 유지할지 결정

중요한 건 코드를 얼마나 많이 썼느냐가 아니다. 돌아가는 결과를 이해하고 책임질 수 있어야 한다.

15 / The actual workflow

Not Prompt → Code

The workflow is not
Prompt → Code.

01

Intent

누구의 어떤 문제를 왜 푸는지 정한다.

02

Requirements

state, edge case, responsive behavior를 적는다.

03

Constraints

system, accessibility, 기술적 경계를 준다.

04

Build

작은 단위로 AI에게 맡기고 실제 코드로 만든다.

05

Inspect

browser, diff, 실제 행동을 보고 다음 결정을 내린다.

프롬프트는 시작점이 아니다.앞선 판단을 압축한 specification이다.

16 / System as context

Constraints before generation

Design system is
context for AI.

AI에게 화면을 만들어 달라고 하기 전에, 무엇을 지켜야 하는지 먼저 알려준다. 시스템이 명확할수록 결과를 고치는 횟수가 줄어든다.

COLOR

Semantic tokens

색상값보다 역할을 알려준다. surface · text · accent · danger.

TYPE

Typography scale

크기보다 hierarchy와 읽는 순서를 먼저 정한다.

SPACE

Spacing rhythm

임의의 숫자 대신 반복 가능한 scale을 쓴다.

BEHAVIOR

Responsive · state · accessibility

화면뿐 아니라 바뀌고 실패하고 회복하는 방식까지 준다.

LANGUAGE

“20px”보다 “breathing room”

CSS 지시보다 디자인 의도와 계층을 설명한다.

17 / Division of labor

Think · build · see · revert

도구보다 역할을 나누는 방식이 중요하다.

THINK.01

Thinking partner

요구사항, 구조, edge case를 정리한다.

BUILD.02

Coding agent

실제 codebase 안에서 작은 작업을 구현한다.

SEE.03

Browser

코드가 아니라 보이고 느껴지는 결과를 확인한다.

REVERT.04

Git

자주 commit하고, 실패하면 안전하게 돌아간다.

18 / Harness it

Speed needs guardrails

Don’t let AI run wild.
Harness it.

AI에게 맡기기 전에

작업을 한 번에 판단할 크기로 나눈다
지켜야 할 constraints를 먼저 준다
완료 조건과 확인할 state를 적는다

AI가 끝났다고 한 뒤

diff를 읽고 의도 밖의 변화를 찾는다
browser에서 state와 edge case를 직접 본다
검증한 결과만 commit하고 다음 작업으로 간다

검증을 멈추고 믿어버리는 순간, 디자이너는 판단하는 사람이 아니라 AI 결과를 승인하는 사람이 된다.

19 / Decision surface

Handoff · test · decide

The prototype is
the decision surface.

STATE

무엇이 바뀌나?

빈 상태, 로딩, 완료, 권한과 맥락 전환을 함께 본다.

TIME

어디서 기다리나?

응답 지연, streaming, 취소와 재시도를 실제 시간으로 느낀다.

FAIL

어떻게 복구하나?

실패했을 때 통제권과 다음 행동이 돌아오는지 결정한다.

팀은 문서를 승인하는 대신, 같은 제품을 만지며 더 빠르게 결정한다.

Open Discussion #2

Name the barrier

대기업에서 이런 방식으로 일해보려 할 때,
실제로 가장 먼저 막힌 건 무엇이었나요?

레거시 프로세스, 권한과 액세스, 코드 리뷰 문화 중 어디였는지 들어볼게요. (2분)

Legacy processAccessCode review

20 / Portfolio as proof

Not a case study · a shipped product

포트폴리오도설명하는 문서가 아니라직접 써보는 제품이될 수 있다.

NOT A CASE STUDY · A SHIPPED PRODUCT

21 / One experiment

Bryan Garage · personal OS

작업을 나열하지 않고,발견하는 방식을설계했다.

포트폴리오 정보를 문서처럼 쌓지 않았다. 방문자가 창을 열고 명령을 입력하면서 제 작업을 발견하도록 만들었다.

01Terminal · CLI로 work, timeline, notes 열기
02Window · Mac처럼 창을 열고 끌고 포커스하기
03Theme · 바탕화면, dock, sound를 하나로 연결하기
04Play · 설명보다 먼저 만져보는 포트폴리오

Garage CLI가 정보 구조를 맡고, Mac theme가 경험의 리듬을 만든다.

Centered Garage CLI showing the portfolio information structure through the ls command

22 / The last 20%

Function works · experience feels right

80%

의 시간이 마지막 20%를 다듬는 데 들었다.

The last 20% is
still design.

창을 드래그할 때의 저항감, active window의 그림자, terminal cursor의 깜빡임, dock의 반응. 각각은 작지만 함께 맞아야 “웹사이트”가 아니라 “내 Mac”처럼 느껴진다.

MAC THEMEmenu bar · window chrome · desktop · dock을 같은 언어로 맞췄다.
MICRO-INTERACTIONdrag · focus · open · close · sound의 타이밍을 직접 다듬었다.

23 / Working proof

Terminal · Mac theme · Play

설명하지 않고,
세 가지를 직접 써보게 했다.

화면 중앙에서 실제 실행 중인 Garage CLI 터미널Live

Terminal

command로 작업과 이야기를 찾아간다.

help · ask · open
화면 중앙의 Garage CLI 실제 Mac 테마와 클래식 컴퓨터 cabinetLive

Mac theme

명령 하나로 환경과 인터랙션 문법을 바꾼다.

screen mac
화면 중앙의 Garage CLI에서 실제 실행한 Cave Runner 게임 타이틀Live

Play / Game

포트폴리오 안에서 Cave Runner를 바로 실행한다.

play

Open Discussion #3

Make one thing tangible

여러분의 다음 프로젝트에서,설명하는 대신직접 작동하게 만들고 싶은한 가지는 무엇인가요?

지금 말이나 문서로 설명하는 부분 가운데 하나만 골라봅시다. (2분)

PrototypeBehaviorProof

The Message

A role you can start now

코드를 짜는 사람이 아니라,

지휘하고 판단하는 사람.

AI가 실행을 더 많이 맡아도, 아키텍처와 인터랙션을 정하고 “무엇을 남길지”는 사람이 결정한다. 저는 그 역할을 Design Engineer라고 부른다. 지금 하는 일에서부터 시작할 수 있다.

RAMP
“We only hire builders.”
Eric Glyman · Ramp Co-CEO
bryangarage.dev ↗bryan@garage ~ % helpBryan Oh · Jul 15, 2026

Think by Building

Thank you

Thank you

이제, 만들면서 이야기합시다.

bryan@garage~ % build --then-discuss
01 / 33
← → · F fullscreen · O overview · S sources · N notes · M mute