요즘IT
위시켓
AIDP - AX
콘텐츠프로덕트 밸리
요즘 작가들컬렉션물어봐
놀이터
콘텐츠
프로덕트 밸리
요즘 작가들
컬렉션
물어봐
놀이터
새로 나온
인기
개발
AI
IT서비스
기획
디자인
비즈니스
프로덕트
커리어
트렌드
스타트업
서비스 전체보기
위시켓요즘ITAIDP - AX
고객 문의
02-6925-4867
10:00-18:00주말·공휴일 제외
yozm_help@wishket.com
요즘IT
요즘IT 소개작가 지원
기타 문의
콘텐츠 제안하기광고 상품 보기
요즘IT 슬랙봇크롬 확장 프로그램
이용약관
개인정보 처리방침
청소년보호정책
㈜위시켓
대표이사 : 박우범
서울특별시 강남구 테헤란로 211 3층 ㈜위시켓
사업자등록번호 : 209-81-57303
통신판매업신고 : 제2018-서울강남-02337 호
직업정보제공사업 신고번호 : J1200020180019
제호 : 요즘IT
발행인 : 박우범
편집인 : 노희선
청소년보호책임자 : 박우범
인터넷신문등록번호 : 서울,아54129
등록일 : 2022년 01월 23일
발행일 : 2021년 01월 10일
© 2013 Wishket Corp.
로그인
요즘IT 소개
콘텐츠 제안하기
광고 상품 보기
디자인

디자인 AI 워크플로에 ‘고삐’를 채워줄 기술 8가지

Sarah
10분
0시간 전
68
에디터가 직접 고른 실무 인사이트 매주 목요일에 만나요.
newsletter_profile0명 뉴스레터 구독 중

‘하네스 엔지니어링’ 관점에서 본 디자인 AI 워크플로

 

생성형 AI의 폭발적인 발전으로 프롬프트 몇 줄이면 수십 개의 UI 시안이 쏟아져 나오고, 코드 한 줄 몰라도 그럴듯한 프로토타입을 손에 쥘 수 있는 시대가 왔습니다. 생산의 효율이 무한대에 가까워진 지금, 역설적으로 우리 앞에는 새로운 문제가 놓였습니다. 바로 ‘쏟아지는 결과물 가운데 무엇이 정답인가?’를 가려내는 일입니다.

 

과거 자동차나 항공 공학에서는 복잡한 전기 배선을 묶고 보호하며 제어하는 장치를 와이어 하네스(Wire Harness)라고 불렀습니다. 거대한 엔진의 힘을 각 부품에 안전하게 전달하고 통제하는 핵심 장치였죠. 지금 IT 업계의 키워드는 이러한 제어를 AI에 적용하는 ‘하네스 엔지니어링(Harness Engineering)’입니다. 야생마처럼 날뛰는 AI의 생산력에 디자인 원칙이라는 고삐를 채워, 우리가 원하는 미래의 사용자 경험으로 정확히 인도하는 기술의 중요성이 커지고 있습니다.

 

그렇기에 디자이너와 기획자의 역할 역시 제작에서 점검으로 중심축이 이동하고 있습니다. AI가 만든 수많은 초안 속에서 미세한 결함을 찾아내고, 브랜드의 영혼을 불어넣어 최종 완성도를 결정하는 심판관으로서의 역량이 새로운 생존 전략이 된 것입니다. 이번 글에서는 이러한 하네스 엔지니어링의 관점에서 변화한 디자인 AI 워크플로우와 우리가 주목해야 할 지능형 점검 기술들을 짚어보려 합니다.

 

일관성 있는 디자인 시스템을 설계하기

예전에는 디자인 시스템을 점검할 때, 디자이너와 개발자가 서로 화면을 맞춰보며 “이 컬러 값이 가이드와 맞나요?”라고 묻는 식의 수동적인 과정이었습니다. 하지만 AI의 등장은 일관성 점검의 주도권이 인간에서 시스템으로 옮겨가고 있습니다.

 

실시간 동기화의 혁신: 클로드 코드와 피그마 MCP

수천 개의 화면에 새로운 컬러 토큰을 적용해야 하는 상황에서, 디자이너는 클로드 코드에게 MCP를 통해 피그마 디자인 시스템 라이브러리에 직접 접근할 권한을 부여할 수 있습니다. AI는 곧 단순히 코드를 생성하는 데 그치지 않고, 현재 작업 중인 코드베이스와 피그마의 디자인 토큰을 실시간으로 비교합니다. 예를 들어, AI가 생성한 컴포넌트의 여백이 피그마에 정의된 16px(spacing-04)가 아닌 임의의 15px로 작성됐다면, AI는 이를 스스로 인지하고 즉시 교정합니다.

 

즉, 디자이너는 이제 “시스템을 제대로 따랐는가?”를 확인하는 반복 업무에서 벗어나, 시스템 자체의 논리 구조를 개선하는 시스템 아키텍트 관점의 점검에 집중하게 됩니다.

 

<출처: 작가, AI로 생성한 피그마 디자인 시스템>

 

자율 운영형 디자인 거버넌스: Supernova

디자인 시스템의 가장 큰 적은 방치입니다. 관리되지 않는 시스템은 결국 코드와 디자인이 따로 움직이는 파편화를 초래합니다. 슈퍼노바(Supernova)는 바로 이 지점에서 자율 운영형 디자인 거버넌스라는 새로운 가치를 만들어냅니다.

 

기존의 디자인 가이드는 문서를 업데이트하는 순간부터 이미 과거의 기록이 되기 일쑤였습니다. 피그마에서 바뀐 것들이 개발 환경에 반영되기까지는 누군가의 정성적인 보고와 수정 과정이 반드시 필요했고, 그 사이에서 수많은 레이어 명명 규칙 오류나 사용되지 않는 스타일이 디자인과 개발의 부채로 남았습니다.

 

슈퍼노바 AI는 디자인과 코드 사이의 ‘진실의 원천(Source of Truth)’을 실시간으로 감시하는 파수꾼 역할을 수행합니다. 피그마의 레이어 구조와 명명 규칙, 스타일 적용 현황을 실시간으로 스캔하고, 시스템 원칙에 어긋나는 요소가 발견되는 즉시 차단합니다. 이러한 자동화된 점검 체계는 디자이너가 단순히 픽셀을 정렬하고 가이드를 맞추는 수고를 덜어줍니다.

 

진실의 원천(Single Source of Truth, SSOT)이란? 

데이터 아키텍처 내에서 특정 정보의 무결성을 보장하기 위해, 모든 데이터 요소를 오직 하나의 공식적인 마스터 데이터베이스에서만 생성하고 편집하도록 강제하는 관리 원칙입니다.

 

대신 디자이너는 컴포넌트 간의 고도화된 상관관계나 데이터 기반의 확장 가능한 아키텍처가 올바르게 작동하는지 점검하는, 보다 고차원적인 디렉터 역할을 맡게 됩니다. 하네스 엔지니어링의 관점에서 보면, 이는 기술이 기술을 스스로 검수하게 함으로써 디자인 품질을 보장하는 가장 완성도 높은 형태의 고삐라고 할 수 있습니다.

 

<출처: Supernova>

 

 

접근성과 사용성을 지키는 기술의 그물망

제작 속도가 아주 빨라질수록, 우리가 미처 챙기지 못한 곳들의 결함도 기하급수적으로 늘어납니다. 하네스 엔지니어링은 인간의 인지적 한계를 겸허히 인정하고, AI라는 정교한 렌즈로 서비스의 기술적·윤리적 결점을 촘촘하게 걸러내도록 돕습니다.

 

WCAG 표준 자동화 검수: Stark

접근성을 고려하는 일은 단순히 법적 규제를 준수하는 차원을 넘어, 모든 사용자에게 평등한 경험을 제공해야 하는 디자이너의 고귀한 의무입니다. 특히 복잡한 금융 지표나 데이터 서비스에서 색약 사용자를 고려하지 않은 차트는 정보 전달의 불평등을 만드는 치명적인 결함이 됩니다.

 

Stark와 같은 AI 기반 도구는 디자인 결과물을 업로드하는 즉시, 수만 가지의 웹 콘텐츠 접근성 지침(WCAG) 규정을 시뮬레이션합니다. “이 차트의 파란색과 녹색은 적색맹 사용자에게 동일한 명도로 보입니다.” 같은 내용을 담은 분석 리포트를 1초 만에 받아볼 수 있다면, 디자이너는 자신의 시각적 편향을 인식하고, 즉각적으로 디자인을 교정할 수 있습니다.

 

<출처: 작가, Stark Auto Scan&Fix 캡처>

 

데이터로 증명하는 시각적 위계와 사용성: Clueify

디자인 검증 현장에서 가장 소모적인 논쟁은 “제 눈에는 이게 더 잘 보여요”와 같은 주관적인 의견 충돌입니다. Clueify는 이런 주관성을 배제하고, AI Vision 기술로 인간의 시각 시스템을 정교하게 모방합니다.

 

Clueify는 수백만 건의 실제 아이 트래킹 데이터를 학습한 AI 모델을 활용합니다. 그 덕분에 디자이너가 작업물을 업로드하면 AI는 사용자의 시선이 가장 먼저 머무는 지점과 시선이 이동하는 경로를 예측한 히트맵(Heat Map)을 생성할 수 있습니다. 이 과정에는 디자인의 복잡도와 인지 부하를 계산하는 어텐션 맵(Attention Map) 아키텍처가 쓰입니다.

 

히트 맵(Heatmap)이란? 

데이터의 밀도를 온도로 표현하는 시각화 방식입니다. 사용자들이 많이 머문 지점은 ‘뜨거운 색(빨간색)’, 적게 머문 지점은 ‘차가운 색(파란색)’으로 표시합니다.

 

어텐션 맵(Attention Map)이란? 

딥러닝 모델이 데이터를 처리할 때 어느 부분에 집중했는지, 특정 픽셀에 부여한 가중치를 보여주는 기술 지표입니다. 인간의 뇌가 시각 정보를 처리하는 방식을 모방한 AI 알고리즘이 이미지 내의 대비, 색상, 형태 등을 분석하여 시선이 쏠릴 가능성이 높은 지점을 계산합니다.

 

<출처: 작가, AI로 생성>

 

이를 통해 디자이너는 실제 사용자 테스트를 진행하지 않고도, 사용자의 시선이 가장 먼저 머무는 핫스팟(Hot Spot)을 1초 만에 확인하며 시각적 위계를 객관적으로 점검할 수 있습니다. 예를 들어 서비스의 핵심인 ‘결제하기’ 버튼보다 주변의 화려한 광고 배너에 시선 점수가 더 높게 나왔다면, AI는 이를 ‘심각한 사용성 저해 요소’로 리포트합니다.

 

이는 디자이너가 의도한 시각적 위계가 실제 사용자의 인지 과정에서 어떻게 작동하는지 사전에 점검하게 함으로써, 단순한 체크리스트 수준을 넘어선 맥락 기반의 오류 검수를 가능하게 합니다.

 

<출처: Behance 텀블벅 리디자인>

 

포용적인 스토리텔링: Alt Text Generator

접근성을 고려한 사용성 설계에서 이미지에 대체 텍스트(Alt Text)를 부여하는 일은 간과할 수 없는 요소입니다. 여기서 대체 텍스트는 단순히 이미지 제목을 입력하는 수준의 작업이 아닙니다. 이는 시각 장애 사용자가 스크린 리더를 통해 디지털 생태계를 탐색할 때, 이미지가 담고 있는 상징적 의미를 전달받고 브랜드의 서사에 온전히 참여할 수 있도록 돕는 의미론적 접근성의 핵심입니다.

 

나아가 이는 검색 엔진 최적화(Search Engine Optimization, SEO)와도 직결됩니다. 검색 엔진이 이미지의 맥락을 더욱 정교하게 이해하도록 만들어, 서비스의 발견 가능성을 크게 높여주기 때문입니다.

 

과거에는 수백, 수천 개의 에셋에 대체 텍스트를 일일이 붙이는 일 자체가 막대한 물리적 노동력을 요구하는 병목 구간이었습니다. 하지만 최신 멀티모달 AI, 특히 시각-언어 모델(VLM, Vision-Language Model)을 활용한 생성기들은 이제 객체를 단순히 나열하는 수준을 넘어선 결과물을 보여주고 있습니다. 이를테면 전에는 “강아지가 한 마리 있습니다”처럼 평면적인 묘사에 머물렀다면, 이제 AI는 “포근한 거실 창가에서 오후의 햇살을 받으며 낮잠을 자는 골든 리트리버”처럼 이미지의 정서적 분위기와 서사적 맥락까지 포착해 제안합니다.

 

시각-언어 모델(VLM, Vision-Language Model)이란? 

VLM은 이름 그대로 시각 정보(Vision)와 언어 정보(Language)를 통합적으로 처리하는 AI 모델입니다. 컴퓨터 비전 기술이 이미지 속 사물을 ‘강아지’, ‘햇살’처럼 개별 객체로 분류하거나 위치를 찾는 데 그쳤다면, VLM은 이미지 전체의 서사와 감정적 맥락을 인간의 언어 체계와 유기적으로 연결하여 이해합니다. “무엇이 있는가?”를 넘어 “어떤 분위기 속에서 어떤 일이 일어나고 있는가?”를 서술할 수 있게 된 것입니다.

 

이러한 혁신적인 변화의 핵심은 공통 잠재 공간(Shared Latent Space)에서의 데이터 정렬 기술에 있습니다. AI는 이미지를 단순히 픽셀의 집합으로 보는 것이 아니라, 픽셀의 패턴(예: 따스한 조명의 각도, 부드러운 피사체의 질감)을 추출하여 이를 인간의 추상적인 언어 개념인 ‘포근함’이나 ‘평화로운 낮잠’이라는 단어와 일치시킵니다. 이렇게 픽셀 데이터가 언어적 의미를 획득하게 됩니다.

 

여기서 디자이너의 하네스는 AI가 생성한 텍스트가 브랜드 고유의 보이스&톤, 그리고 철학적 일관성과 맞아떨어지는지 최종 검수하는 역할을 수행합니다.

 

기술적 복잡성에 매몰되지 않으면서도 콘텐츠의 포용성을 확보하고, 서비스의 품격을 결정짓는 마지막 디테일을 지켜내는 것. 이것이 바로 지능형 도구를 다루는 현대 디자이너의 진화된 책무입니다.

 

<출처: 작가, tailwindapp 캡처>

 

 

엣지 케이스에 대응하는 시뮬레이션

완벽하다고 믿었던 디자인이 실제 환경에서 무너지는 순간이 있습니다. 이런 엣지케이스는 디자이너와 개발자에게 예상치 못한 불청객처럼 찾아옵니다. 그러나 이를 대응하지 못하면 프로라고 말하기 어렵습니다.

 

이제 우리는 AI를 활용해 인간의 상상력이 미처 닿지 못했던 극단적인 상황, 즉 엣지 케이스를 시뮬레이션하고 이를 선제적으로 방어할 수 있습니다.

 

시각적 완결성의 자동 검증: Applitools

과거에는 다양한 디바이스와 환경에 대응하기 위해 화면을 일일이 복제하고 대조하는 수작업이 필요했습니다. 특히 텍스트 길이가 극단적으로 길어지는 언어(독일어 등)나, 오른쪽에서 왼쪽으로 읽는 RTL(아랍어·히브리어 등) 환경은 디자이너에게 상당한 부담이었습니다.

 

이를 위해 Applitools AI는 인간의 눈처럼 화면을 인지하고 분석합니다. 수백 개의 가상 브라우저와 디바이스 환경에서 디자인을 실시간으로 렌더링하며 다양한 엣지 케이스를 찾아냅니다.

 

예를 들어 사용자 이름이 지나치게 길어 버튼 밖으로 튀어나가거나, 상품명이 세 줄 이상으로 늘어났을 때 레이아웃이 겹치는 문제 같은 동적 데이터 이슈를 탐지합니다. 또한, 아랍어 환경에서 프로필 이미지가 왼쪽에 있어야 하지만 오른쪽에 그대로 남아 있는 등 RTL 미러링 오류도 잡아냅니다. 여기에 더해 노치 디자인이 있는 기기에서 상단 바 아이콘이 가려지거나, 저사양 기기에서 폰트 렌더링이 뭉개지는 미세한 픽셀 단위의 오차까지 탐지하며 디바이스 파편화를 방지합니다.

 

이러한 엣지 케이스 오류를 발견하면 Applitools는 즉시 디자이너에게 확인을 요청하는 시각적 회귀 테스트를 수행합니다. 그 덕분에 디자이너는 수작업 기반의 전수 조사에서 벗어나, 시스템의 시각적 안정성을 높이는 데 집중할 수 있습니다.

 

<출처: applitools 자동 테스팅>

 

사용자 시나리오 맞춤 대응: Synthetic Users

기술적 결함을 넘어 사용자의 심리나 상황의 변수까지 선제적으로 점검하는 일은 서비스의 성패를 좌우하는 핵심 과업입니다. 최근 주목받는 Synthetic Users 같은 AI 에이전트 서비스는 가상의 페르소나를 디지털 환경에 주입해 디자인의 실질적인 사용성을 실시간으로 검증합니다. 이는 디자이너가 하나하나 통제할 수 없었던 사용자의 주관적 영역에 정교한 고삐를 채우는 과정이기도 합니다.

 

예를 들어 고령 사용자 페르소나인 ‘70대 알렉스’는 디지털 리터러시가 낮고 시각적 인지 능력이 다소 떨어지는 사용자입니다. AI는 이 페르소나를 통해 추상적인 아이콘 의미를 이해하지 못하거나, 작은 텍스트 크기 때문에 정보 구조 안에서 길을 잃는 지점을 정확히 짚어냅니다.

 

또 다른 예로 상황적 제약을 가진 페르소나인 ‘바쁜 직장인 브라이언’은 멀티태스킹 상황에서 극도의 시간 압박을 느끼는 사용자입니다. 이 경우 AI는 정보 계층 구조가 지나치게 복잡하거나, 불필요한 팝업 인터럽트가 발생할 때 사용자가 느끼는 피로도와 즉각적인 이탈 구간을 시뮬레이션합니다.

 

AI 에이전트는 이러한 특성을 반영해 서비스를 직접 탐색하고, 사용자가 어디서 행동을 멈추고 어디서 결정을 망설이는지에 대한 마찰 지점 데이터를 리포트합니다. 이제 우리는 “사용자가 왜 여기서 멈췄을까?”를 머릿속으로 추측하는 가설 단계에 머물지 않습니다. 대신 AI가 점검해온 객체화된 행동 데이터를 바탕으로 서비스 고도화와 개선 의사결정에 집중하게 됩니다.

 

결국 이러한 지능형 도구의 활용은 우리를 단순한 검수자의 역할에서 해결책을 설계하는 전략가의 영역으로 끌어올립니다. “무엇이 틀렸는가?”를 찾는 수동적 태도에서, “어떻게 완성도를 높일 것인가?”를 고민하는 능동적 태도로의 전환. 이것이 바로 AI 시대의 하네스 엔지니어링이 선사하는 진짜 묘미입니다.

 

<출처: syntheticusers 유저 생성과 인터뷰 진행>

 

 

최종 심미안을 갖춘 정서적 공명과 브랜드 철학의 관점

지금까지 기술적 결함을 제거하고 시스템 효율을 극대화하는 하네스의 역할을 소개했다면, 마지막으로는 그 고삐를 쥔 기수, 즉 디자이너의 본질적인 감각에 대한 이야기를 해볼까 합니다. AI가 시스템적으로 무결하고 기술적으로 완벽한 디자인을 만들어냈다고 해도, 그것이 정말 사용자의 마음을 움직이는 좋은 디자인인가에 대한 문제는 또 다른 차원의 영역이기 때문입니다.

 

바로 이 지점에서 디자이너만의 독보적인 가치인 심미안이 발휘됩니다. 이는 단순히 시각적 아름다움을 넘어, 브랜드의 영혼과 사용자의 감성을 잇는 정서적 점검까지 포함합니다.

 

예를 들어 저는 ‘따뜻함’과 ‘인간 중심의 직관’이라는 디자인 철학을 가지고 일합니다. 이를 실제 서비스 환경에 적용해보면 어떨까요?

 

AI가 설계한 보험 서비스의 ‘사고 접수 완료’ 화면은 정보 구조 측면에서 매우 효율적이고 명확할 것입니다. 하지만 예기치 못한 사고로 당혹감과 불안을 느끼는 사용자가 이 화면을 마주한다면 상황은 달라집니다. AI가 제안한 경직된 시스템 폰트와 차가운 원색의 체크 아이콘, 그리고 “접수가 완료되었습니다”라는 건조한 문구는 사용자에게 기능적인 편리함은 줄지언정, 정서적인 안도감까지 줄 수는 없습니다.

 

바로 이 순간, 디자이너의 하네스가 다시 작동합니다. AI가 내놓은 매끈한 정답지에 인간의 온도를 불어넣는 일입니다. 버튼 모서리의 곡률을 미세하게 조정해 시각적 긴장감을 완화하고, 마이크로 카피에 브랜드 철학이 담긴 다정한 위로의 톤 앤 매너를 입히는 과정입니다.

 

<출처: 작가>

 

이렇게 기술이 복잡성을 삼켜 인터페이스 뒤편으로 사라질수록, 마지막까지 남아 사용자의 삶을 어루만지는 것은 결국 사람의 상황을 깊이 이해하려는 디자이너의 태도입니다. AI가 99%의 논리적 완결성을 구축하더라도, 사용자와 서비스가 깊게 공명하도록 만드는 마지막 1%의 울림은 오직 인간 디자이너의 예민한 점검을 통해서만 완성됩니다.

 

 

마치며

AI 덕분에 생산력이 상향 평준화된 지금, 누가 더 많이 그리고 더 빠르게 만드느냐는 더 이상 변별력이 되지 않습니다. 그 영역은 이미 AI가 가져갔습니다. 이제 우리가 스스로에게 던져야 할 질문은 하나입니다.

 

“우리는 무엇을 점검할 수 있는가?”

 

브랜드의 일관성이 흔들리는 순간을 알아채는 감각, 기술적 결함이 사용자 경험을 갉아먹기 전에 먼저 막아내는 판단력, 그리고 AI가 완성한 화면에 사람의 온도를 불어넣는 태도. 이런 역량은 프롬프트 한 줄로 만들어지지 않습니다. 수백 번의 시행착오와 사용자의 표정을 직접 목격한 경험, 그리고 사람을 향한 진심 어린 시선이 쌓여야 비로소 만들어지는 능력입니다. 그것이 바로 하네스 엔지니어링의 본질이며, AI가 결코 대체할 수 없는 디자이너만의 데이터셋입니다.

 

기술이 평준화될수록 경험의 깊이가 차별점이 됩니다. 생산은 AI에게 맡기더라도, 그 고삐(Harness)만큼은 절대 놓지 마십시오. 여러분이 현장에서 쌓아온 모든 경험이야말로, 가장 귀한 자산이기 때문입니다.

 

©️요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.