접근성3 v0로 컴포넌트 만들기 (핸드오프, PR 책임, a11y 자동화) 디자이너가 직접 PR을 올린다는 말을 처음 들었을 때, 솔직히 "그게 말이 되나?" 싶었습니다. 그런데 어드민 대시보드 외주를 진행하면서 그 말이 현실이 됐습니다. v0 by Vercel을 도입한 뒤 shadcn 기반 React 컴포넌트 12개를 디자이너 주도로 만들어냈고, 코드 품질은 시니어 엔지니어가 'PR 통과 기준 충족'으로 평가했습니다.손으로 그린 와이어프레임이 코드가 되는 흐름와이어프레임(wireframe)이란 화면의 레이아웃과 핵심 요소를 빠르게 스케치한 설계도를 말합니다. 일반적으로 이 단계는 디자이너 영역에서 끝나고, 개발자가 다시 해석해 구현하는 방식이었습니다. v0는 그 경계를 허물어버립니다.텍스트 프롬프트와 스크린샷을 함께 입력하면 shadcn UI 기반의 React 컴포넌트 코드가.. 2026. 5. 30. v0 디자인 개발 (핸드오프, 코드리뷰, 접근성) 디자이너가 직접 PR을 올린다는 말, 처음 들었을 때 황당하다고 느꼈습니다. 그런데 실제로 어드민 대시보드 외주에서 그 구조를 만들었고, 핸드오프 회의가 주 4시간에서 30분으로 줄었습니다. v0 by Vercel이 그 변화의 출발점이었습니다.디자이너가 코드를 PR로 올리는 시대가 왔다디자인과 개발 사이의 핸드오프(handoff)란 디자이너가 완성한 시안을 개발자에게 전달하고, 개발자가 이를 코드로 구현하는 전달 과정을 말합니다. 오랫동안 이 구간은 협업의 병목이었습니다. 시안을 넘기고, 스펙을 설명하고, 수정 사항을 다시 주고받는 사이클이 프로젝트 일정을 잡아먹는 구조였습니다.v0 by Vercel은 텍스트 프롬프트나 스크린샷을 입력하면 shadcn/ui 기반의 React 컴포넌트 코드를 즉시 생성해주.. 2026. 5. 29. 하단 탭바 설계 (발견성, 터치타겟, 마이크로인터랙션) 솔직히 고백하자면, 저도 한때 햄버거 메뉴가 "깔끔하다"고 생각했습니다. 메인 화면을 건드리지 않아도 되고, 아이콘 하나로 모든 기능을 숨길 수 있으니까요. 그런데 모바일 뱅킹 앱을 리디자인하면서 그 생각이 완전히 뒤집혔습니다. 주요 기능에 도달하는 평균 탭 수가 3.2회에서 1.4회로 줄고, 첫 사용일 기준 작업 완료 시간이 12.8초에서 7.1초로 단축되는 걸 숫자로 확인하고 나서야 하단 탭바가 단순한 디자인 선택이 아니라 사용성의 핵심 구조임을 실감했습니다.발견성을 결정하는 구조, 탭바에 무엇을 담을 것인가앱을 처음 켠 사람이 "이 기능이 어디 있지?"라고 헤매기 시작하면 그건 콘텐츠 문제가 아니라 네비게이션 문제입니다. 저는 이것을 발견성(discoverability)이라는 개념으로 정리합니다. .. 2026. 4. 27. 이전 1 다음
