디자인은 개발이 되고, 개발은 디자인이 된다
Design-First Software Engineering 시리즈 3탄
이 글은 세계적으로 영향력 있는 기술 뉴스레터이자 팟캐스트인 Pragmatic Engineer의 에피소드 Design-First Software Engineering을 바탕으로, 실무 AI 엔지니어의 시선에서 재해석한 글입니다. 팟캐스트에서 다룬 핵심 내용을 요약하고, 현업에서 겪은 고민과 소회를 함께 나눕니다.
개발자와 디자이너의 경계를 허무는 팀 문화
Craft는 디자인 시스템보다 먼저 애니메이션 시스템을 만들었습니다.
모든 컴포넌트는 같은 리듬으로 움직이고, 같은 곡선으로 사라지고 등장합니다.
“디자인은 Figma에서 시작되지 않았습니다. 우리는 사각형 하나도 코드로 직접 그려보고 시작합니다.”
이 글에서는
Craft 팀의 디자인-퍼스트 개발 문화,
디자인과 개발의 경계를 허무는 소통 방식,
그리고 감각 중심의 컴포넌트 설계 방식을 정리합니다.
감정을 움직이는 코드
Craft 팀은 아래와 같은 질문에서 출발합니다.
이 애니메이션은 사용자에게 어떤 감정을 줄까?
툴바가 사라질 때, 동시에 어떤 컴포넌트가 움직여야 어색하지 않을까?
그래서 애니메이션 곡선, 딜레이, 순서를 통일하는 내부 시스템을 만들었습니다.
누구든지 이 시스템을 이용하면 자연스럽고 통일감 있는 애니메이션을 구현할 수 있습니다.
이것은 단지 "예쁘게 보이기 위한 노력"이 아니라, 제품에 대한 감정의 일관성을 설계하는 일입니다.
디자인 툴 없이, 코드로 시작한다
Balint는 Sketch나 Figma보다, 직접 코드를 치며 레이아웃을 짭니다.
사각형 하나, 마진 하나를 손으로 조절해 보며 감각을 실험합니다.
이 방식은 AI 엔지니어인 저에게도 인상 깊었습니다.
저 역시 v0.dev를 활용해 UI 흐름을 설계하고, 동작하는 프로토타입을 빠르게 만든 경험이 있습니다.
이 과정에서 '코드가 곧 디자인 도구'가 된다는 사실을 실감했습니다.
기능의 정확도는 코드가 만듭니다. 하지만 감정은, 직접 손으로 만지며 다듬어야 합니다.
디자이너와 개발자의 경계가 없다는 것
Craft에는 프로덕트 매니저가 없습니다.
대신 디자이너와 개발자가 함께 기획하고, 설계하고, 실험합니다.
이런 구조는 아래와 같은 특징을 가집니다.
새 기능 논의는 문서가 아닌 "작동하는 샘플 앱"으로 시작
기능 제안은 "이거 어때요?"가 아니라 "이렇게 움직여보면 어때요?"
개발자도 인터랙션을 설계하고, 디자이너도 레이아웃 코드를 읽는다
이러한 구조는 특히 감각 중심의 설계에 큰 힘을 발휘합니다.
말로 설명하기 어려운 것들(예: 느낌, 리듬, 밀도, 타이밍)을 팀 전체가 공유할 수 있게 되기 때문입니다.
AI 엔지니어로서, 이 문화에서 배운 점
AI 기능을 구현할 때, 예측 결과를 어떻게 보여주느냐가 사용자 신뢰에 큰 영향을 줍니다.
결과를 어디에, 어떤 타이밍으로, 어떤 애니메이션으로 보여줄지까지 고민하지 않으면,
모델이 아무리 뛰어나도 '불편한 앱'이 될 수 있습니다.
Craft는 그 점을 철저히 설계합니다.
그리고 그 설계는 기술이 아니라 문화에서 나옵니다.
감각을 함께 만드는 팀, 서로의 코드를 이해하고 존중하는 조직.
그게 오늘날 디자인 중심 개발자의 진짜 의미라고 생각합니다.
시리즈를 마무리하며
Craft가 보여준 세계는 이렇게 요약할 수 있습니다:
"코드는 기능을 만들 수도 있지만, 감각도 만들 수 있다."
이 감각은 성능 지표로 측정되지 않습니다.
하지만 사용자에게는 잊히지 않는 경험으로 남습니다.
AI 기술이 자동화와 추상화를 가속화할수록,
감각을 설계할 수 있는 개발자의 가치는 더욱 커질 것입니다.
그 감각은 프레임워크가 아니라, 사람에게서 나옵니다.
