커뮤니케이션 잘하는
디자이너가 되고 싶어요.
그렇다면 어떤 무대를 고르느냐가 중요하겠죠.
*본 원고는 pixso로 소정의 원고료를 지원받아 작성되었습니다.
커뮤니케이션 잘하는
디자이너가 되고 싶어요
그렇다면 어떤 무대를 고르느냐가 중요하겠죠. 타 부서와 활발하게 교류하는 프로덕트 디자이너라면 더더욱 어떤 도구로 어떻게 소통하느냐가 중요해요. 베리챗의 PM은 바이브코딩으로 프로토타입을 만들어 개발자, 디자이너와 소통하는데요. 디자이너 또한 소통오류를 줄이고 커뮤니케이션 코스트를 최소화하기 위해선 어떤 툴을 사용하느냐가 관건인 것 같아요.
피그마가 있는데 굳이?
Figma를 대체할 수 있는 툴이라고 들었다. 이미 Figma가 너무나 잘 되어있는데 구태여 새로운 툴을 또 배워야 하나?
다양한 툴을 접하는 일 또한 프로덕트 디자이너가 해야 할 일이라고 생각한다. 나는 요즘처럼 새로운 툴이 쏟아져 나오는 시대를 처음 겪는다. 그렇기 때문이 이러한 마음가짐은 이 시대를 유리하게 살아갈 수 있게 해 준다.
Pixso의 인터페이스는 피그마와 거의 흡사하다. 80~90% 정도 유사한 것 같다. 따라서 이미 피그마에 익숙한 디자이너라면 러닝커브가 적다. 또한 fig파일을 import 할 수 있기 때문에 필요하다면 피그마에서 작업한 파일을 가져올 수도 있다.
01
AI로 작업시간 단축하기
우리는 종종 시간에 쫓긴다. 예상치 못한 변수로 인해 시간에 쫓기거나, 정말 정량적으로 일이 많아서 시간에 쫓기기도 한다. 이처럼 시간효율의 문제 해결을 위해서, 혹은 기회와 경험의 확장을 위해서 우리는 효율적인 툴을 찾게 된다. 특히 프리랜서의 경우, 시간 관리가 곧 역량이다. 그렇다면 PIXSO는 작업시간을 얼마나 단축시켜줄 수 있을까?
PIXSO는 다양한 AI기능을 지원하고 있다. 디자인에 직접적으로 필요한 기능(바이브코딩 등)도 지원하지만 디자인 외에 자잘하게 시간을 투자해야 하는 일을 위한 기능도 다양하게 지원한다. 특히 '디자인 요소 체크리스트'라는 기능이 재밌는데, 내가 그린 UI를 보완할 수 있는 다양한 항목을 제안해 준다. AI도우미에 대한 이야기는 다른 글에서 더 깊게 다룰 예정이기 때문에 오늘은 다른 이야기를 해볼까 한다.
02
디자이너의 역할 확장
PIXSO로 바이브코딩을 할 수 있다. 피그마 메이크와 유사한 기능인데, 자연어로 된 프롬프트를 활용하여 빠르게 UI를 그릴 수 있다. 그리고 이렇게 그린 UI를 디자인 모드로 옮겨 편집할 수 있다.
이렇게 디자인 모드로 가져온 초안은 와이어프레임으로 활용하기에도 좋다. 기획자나 개발자 가운데서 커뮤니케이션할 때 꽤 유용하다. 우리는 시각화된 자료를 바탕으로 커뮤니케이션할 때 소통의 오류를 최소화할 수 있다. (앞에서도 말했지만 실제로 베리챗의 PM은 바이브코딩으로 프로토타입을 만들어 기획안을 전달해 주신다.)
03
디자인 시스템으로
일관성 있는 결과 만들기
효율적인 유지보수를 위해서 잘 짜여진 디자인시스템은 중요하다. 첫 타자가 얼마나 잘 정리했느냐에 따라 후발 주자들이 얼마나 삽질을 해야 하는가가 결정된다.
픽소에서는 디자인 시스템을 프로젝트 단위로 구축해 팀과 공유할 수 있다. 디바이스, 프로덕트에 따라 구분하여 컴포넌트를 효율적으로 관리할 수 있기 때문이다. 우리 팀원들의 반복작업을 줄이고 새로운 팀원의 빠른 랜딩을 돕는다. 또한 외부 프리랜서가 동일한 기준으로 작업하도록 가이드를 줄 수도 있다.
토큰 활용에 대한 더 자세한 설명은 아래에서 확인할 수 있다.
https://pixso.net/community/file/4zaFw99bpJ8I5v2ijiIGYg
04
레퍼런스를 잘 활용하자
백지에서 바이브코딩을 하는 것보다 AI에게 레퍼런스를 제시하면 삽질을 덜 할 수 있다. AI가 그려주는 화면은 대게 보편적이고 평범하다. 그렇기 때문에 레퍼런스를 첨부하면 좀 더 의도한 것과 유사한 결과물을 만들어 낼 수 있다. 결국 마무리는 사람이 하겠지만.
(좌) 레퍼런스 O / (우) 레퍼런스 X예를 들면 위와 같이 레퍼런스를 제시했을 때와 그렇지 않았을 때 결과물에 차이가 있다. 팀원과 커뮤니케이션할 때도 말로 구구절절 설명하는 것보다 시각자료를 잘 활용하는 것이 효과적이다. 아래는 결과물이다.
(좌) 레퍼런스 O 결과물 / (우) 레퍼런스 X 결과물끝.
