지난 글에서 친구에게 필요한 앱을 웹 대신 React Native로 만들기로 했다고 이야기했는데, 이번엔 본격적으로 디자인 단계로 넘어왔다.
내가 개발할 앱은 비즈 키링 완성품에 어떤 소재와 부자재가 사용됐는지 한눈에 볼 수 있는 앱이다.
Stitch로 디자인하기
디자인 작업에는 Stitch를 사용했다. Stitch는 Adobe에서 만든 AI 기반 UI 디자인 툴로, 텍스트로 원하는 화면을 설명하면 그에 맞는 UI를 자동으로 생성해준다. 생성된 결과물은 피그마로 바로 내보낼 수 있어서 이후 커스텀 작업도 수월하다.
핀터레스트로 이것저것 상세페이지 등등 구경하다가 마음에 드는 레퍼런스를 찾아서 첨부한 다음 원하는 디자인을 설명했다.
화면 중앙에는 사용자가 업로드한 완성된 비즈 키링의 이미지가 있고, 그 주위에는 완성된 비즈 키링에 사용한 디테일한 비즈와 부자재가 떠있도록 하고 싶어. 완성된 비즈키링에 어떤 소재와 부자재가 사용되었는지 한눈에 볼 수 있는 앱 화면이야.
이걸 영어로 번역해서 Stitch에 처음 요청했더니
알아서 임의로 비즈 키링 사진도 넣어주고, 사용한 비즈들이 떠있는 UI랑 목록으로 볼 수 있는 UI를 따로 만들어주었다.
색상 지정과 화면 다듬기
디자인이 마음에 들어서 다음으로는 메인 색상과 서브 색상을 지정해주고, 재료 리스트는 없애달라고 했다.
비즈 키링 완성품 확인 화면은 마음에 드는 디자인이 나와서, 이번에는 비즈 키링 재료 목록에서 한 재료를 클릭했을 때의 상세 화면도 디자인해보았다.
Stitch가 디자인을 무난하게 잘 뽑아주었고, 원하는 방향으로 빠르게 화면을 잡아나갈 수 있었다.
디자인 툴을 직접 다루는 게 아니라, 결과물을 빠르게 확인하고 다듬는 느낌이었다.
피그마로 내보내기
Stitch에서 디자인한 결과물은 피그마에 바로 붙여넣기할 수 있다. 디자인 선택 후 Export → Figma 옵션으로 가져오면 된다.
피그마에 붙여넣으면 레이아웃 구조도 잘 잡혀 있어서 요소들 하나하나 위치나 색상 등을 커스텀하기가 수월했다.
색상과 글씨체도 직접 수정해보았는데, 막상 바꾸고 나니 이전 디자인이 더 나아 보이기도 했다. 개발을 진행하면서 다시 다듬어볼 예정이다.
마치며
AI 툴을 활용해 빠르게 화면을 잡고, 피그마에서 직접 다듬는 흐름이 생각보다 효율적이었다. 다음 글에서는 본격적으로 개발 환경을 세팅하고 화면을 구현하는 과정을 다뤄볼 예정이다.
