이 버튼... 클릭하면 촤르르르~
펼쳐지게 해 주세요.
개발자 그만 괴롭히고, 프로토타입으로 소통하는 버릇을 들이자.
여기 로딩될 때 약간 뿅! 하고 나타나면 좋겠어요.
뿅의… 강도는 어느 정도로…?
한 뿅인가요? 두 뿅인가요?
개발자 그만 괴롭히고,
프로토타입으로 소통하는 버릇을 들이자.
팀원들이 나를 찾을 필요가 없게끔 만들고 싶다. 내가 부재중일 때 프로젝트의 병목이 되는 현상을 막고 싶기 때문이다.(=연차 쓴 날에는 맘 놓고 잠수 타고 싶기 때문이다.) 커뮤니케이션 코스트가 늘어날수록 팀의 리소스는 누수된다. 경우에 따라 서로에게 상상의 여지를 주지 않는 편이 나을 때가 있다. 그러기 위해서는 말로 장황하게 설명하는 것보다 프로토타입을 만들어서 소통하는 편이 좋다.
메신저로 소통할 때는 링크를 직접 거는 것으로 설명을 대신한다
디자인 파일에는 링크를 걸어 소통오류를 최소화한다 AI로 주요 화면 생성하기
설명을 위한 화면은 Pixso ai로 생성했다. 이미 많이들 사용하고 계시겠지만, Ai에게 화면을 요청할 때는 프롬프트를 ai에게 부탁해서 가져오면 좀 더 의도한 것과 가까운 결과물을 얻기가 편하다. 예를 들면 아래와 같은 방법을 시도해 볼 수 있다.
1. gpt로 바이브코딩에 활용할 프롬프트 작성
2. 프롬프트를 그대로 바이크코딩툴에 복붙
3. 개발언어와 디자인에 적용할 UI 키트를 선택
4. 생성된 화면을 디자인 모드로 가져오기
pixso에서는 개발언어와 UI키트를 선택할 수 있다. UI 키트를 설정하면 shadcn과 같은 UI키트를 적용할 수 있어, 훨씬 유니버셜 가이드에 부합하는 결과물을 뽑아낼 수 있다.
UI kit 적용 유무에 따른 결과물 차이오른쪽 화면이 UI kit를 적용한 화면이다. 비교적 절제된 컬러가 적용된 결과물이 나왔다. 레이아웃이 깨지는 현상도 덜했다.
디자인 모드에서 흐름 설계하기
평소에 시도하지 않던 괴랄한 UI가 보고 싶어서. '다크모드&네온 컬러의 숙박예약 앱'을 요청해 봤다. UI kit은 Schadcn을 적용했더니 아래와 같은 화면을 만들어주었다.
결과물을 디자인 모드로 가져와 흐름을 만들어줬다. 바이브코딩으로 생성한 스크린들이 한 번에 불러와줘서 작업시간을 크게 단축시킬 수 있었다. 물론 하나하나 스크린의 디테일을 뜯다 보면, '이럴 거면 내가 처음부터 그리고 말지'소리가 절로 나오지만, 적재적시에 활용하면 커뮤니케이션 코스트를 획기적으로 줄일 수 있을 것 같다.
프로토타입으로 만들기
기본적으로 피그마에서 가능했던 화면전환 효과나 hover, pressed 등의 마우스 액션도 구현 가능하고, 간단한 애니메이션 작업하기에 유용한 smart animation 효과도 지원되기 때문에 프로토타입을 만드는데 부족함은 없었다.
'이 버튼... 클릭하면 촤르르르~ 펼쳐지게 해 주세요.'라고 설명하는 것보다 디자이너의 상상을 직관적으로 전달할 수 있을 테니까. 기획자나 개발자와 스무고개 하는 것보다 훨씬 나을 것 같다.
핸드오프 할 때 유용한 플러그인
의사결정이 끝났다면 이제 결과물을 개발자에게 hand-off 해보자. 디자인을 핸드오프 할 때는 가능한 문서 형태로 전달하는 게 좋으며, 업무 티켓을 관리하고 있다면 중요한 의사결정 사항들은 하나의 티켓에서 가능한 모든 히스토리를 가능하도록 만드는 게 좋다. 그래야 '어, 그거 지난주에 슬랙에서 말씀드렸던 건데요'와 같은 킹 받는 소리를 하거나 듣지 않을 수 있기 때문이다.
디자인 결과물은 화면단위의 링크로 전달하는 것이 정확하며, 링크된 화면 근처에 주요 결정사항들을 메모하고, 필요하다면 디테일한 자료를 바로 찾아볼 수 있도록 링크를 걸어두는 편이 좋다. 연말에 연차 냈는데 메신저에 멘션되는 불상사를 막고 싶다면 말이다.
화면정의서를 작성하는 방식은 디자이너마다 다르겠으나, 여러 툴을 오가는 것이 번거롭다면 디자인툴 내에서 해결하는 것도 방법이다. 디자인툴 자체에서 제공하는 코멘트 기능을 활용하거나 anno-tation이나, commentor와 같이 메모 기능을 지원하는 플러그인을 활용할 수도 있다.
*본 원고는 pixso로부터 소정의 원고료를 지원받아 작성되었습니다.
끝.
