디자이너님, 랜딩페이지 주말 동안 작업 가능하신가요?
피그마 사이트로 1시간 만에 랜딩페이지 만들기
디자이너님,
랜딩페이지 주말 동안 작업 가능하신가요?
IR일정이 급하게 잡혀서요. 혹시, 주말 동안 서비스 소개 페이지 작업 가능하신가요? 그런데 저희가 컨셉만 있는 단계라서요. UI는 적당히 구색만 맞춰주시면 될 것 같아요. 일정 어려우시면 편히 말씀 주세요.
마침 주말에 일정이 없었지만, 일하는데 들어가는 주말 시간은 나의 행복과 반비례했다. 아마 주말에 일하는 시간이 늘어날수록 내 삶의 만족도는 떨어질 것이다. 그렇다면 작업시간을 최소화할 방법은 없을까?
AI가 UI도 그려준다는 시대지만, AI가 그린 UI는 어차피 다시 한번 손을 거치게 되어 있었고, 이럴 거면 내가 처음부터 그리는 게 낫겠다고 생각하던 때였다. 그런데, 실제가 없는 제품의 적당히 구색만 맞춘 UI를 뽑아내기엔 AI만 한 게 없다고 생각했다. PM님은 나에게 stitch라는 툴을 소개해주면서 UI 그리는데 도움이 되었으면 좋겠다는 이야기도 덧붙였다.
랜딩페이지는 디자인과 퍼블리싱을 동시에 할 수 있는 피그마 사이트를 활용하고, 안에 들어가는 UI는 stitch로 뽑아내면 단시간에 서비스 소개 페이지를 만드는 게 가능해 보였다. 자존심이 허락하지 않아 사용하지 않고 있었던 피그마 사이트의 템플릿도 가져다 쓰기로 했다.
figma site
랜딩페이지 만들기
피그마 사이트에서는 피그마로 디자인한 작업물을 바로 퍼블리싱할 수 있다. 기존에 피그마의 프로토타입에서 구현 가능했던 인터랙션도 그대로 구현 가능하다. 따라서 간단한 애니메이션 작업이나 다양한 마우스 인터랙션이 가능해서 있어빌리티 있는 웹페이지를 뚝딱 만들 수 있다.
피그마 사이트는 몇 가지 템플릿을 제공한다. 남이 만든 템플릿을 가져다 쓰는 건 자존심 상하는 일이라고 생각해 왔지만, 이번엔 나의 황금 같은 주말시간을 지켜야 하기에 현실과 타협하기로 했다.
일단 적당해 보이는 템플릿을 고른다. 그러면 스타일 가이드와 몇 가지 스크린을 확인할 수 있다. 디자인에 적용된 텍스트와 컬러 스타일이 잘 정리되어 있어서, 브랜드 컬러에 맞게 팔레트의 색상을 변경하면 템플릿에 바로 반영되어 편하게 작업할 수 있다.
컬러만 조금 바꾸고 제공된 UI를 조금 변형했을 뿐인데 1시간 만에 랜딩페이지 초안이 완성되었다. 또한, 데스크탑을 작업하면 바로 모바일에 반영되어 시간을 많이 단축할 수 있었다. 여기서 디테일을 올리자면 시간이 끝 간데없이 들어가겠지만, 긴박한 일정 속 급조한 페이지로써의 역할은 충분히 했다. 덕분에 황금 같은 주말 시간을 보존할 수 있게 되었다.
stitch,
AI로 UI 그리기
이제는 실체가 없는 서비스의 UI를 그릴 차례다.
실제 구현을 고려한다면 훨씬 더 많은 시간과 고민이 필요했겠지만 랜딩페이지 대문에 사용될 컨셉컷 한 장 정도만 필요했기 때문에 크게 부담 없이 작업할 수 있었다.
자연어로 프롬프트를 입력하니 그럴듯한 UI가 나왔다. 아래 이미지는 3번 정도 수정을 거친 화면이다. 시간으로 치자면 5분 정도 걸린 것 같다. 심지어 피그마로 가져와 편집도 가능하다... 무서운 세상이다..
stitch로 작업한 대시보드 UI일일이 IA와 PRD를 보면서 와이어프레임부터 스크린 플로우, 화면정의서까지 그리던 때가 떠올랐다. 물론 지금도 와이어프레임을 그리고 화면정의서를 다듬는다.
아침에 눈을 뜨기가 무섭게 세상이 바꾸는 요즘, 흐름에서 이탈하지 않고 계속해서 앞으로 나아가고 싶을 뿐이다.
끝.
