서비스 컨셉
Pulsen 은 고용자들의 삶을 분석하는 챗봇을 만들기를 원했습니다
그들은 이 챗봇이 좀 더 친근하길 바랬습니다
그래서 여기에는 사용자들의 답변과, 채팅들이 등장할 때 꽤 많은 인터렉션들이 기획되었습니다.
앱의 기본적인 기능은 크게 어렵지 않은 부분이었습니다
처음 질문들을 받아놓고, 사용자의 입력을 받아서 마지막에 보내면 되었습니다
그러나 저는 이 디테일한 인터렉션들을 어떻게 효과적으로 관리해야 좋을지 생각해야 했습니다.
이러한 이유로 저는 Framer X를 이 프로젝트의 메인 IDE (통합개발환경)으로 사용하기로 했습니다.
React 에서 State를 어떻게 관리하는지 생각하기
처음에 저는 앱의 상태를 관리하기 위해서, redux를 넣었습니다
이것은 Framer X에 부드럽게 합쳐졌고, 저는 곧장 Framer의 Data 가 React의 states처럼 동작하고 있었다는 걸 깨달았습니다.
그래서 저는 redux 들을 Data 값들로 Override 들과 함께 바꾸었습니다
처음에는 immutable 이슈들이 조금 있었지만, 조금 노력을 해보니 제 메인 상태 관리 도구로 사용하기에 꽤 적당했습니다.
이것은 꽤 괜찮은 선택이었습니다
왜냐면 이 앱은 크게 복잡한 상태들을 갖고 있지 않았거든요
제가 해야 하는 것들은 질문들을 저장하고, 각각의 사용자의 답변들을 결과물로 저장하는 일이었습니다
결과적으로 저는 Redux 나 Mobx 등을 사용하지 않고서도 쉽게 컴포넌트들 간의 상태를 공유할 수 있었습니다.
실제 질문 데이터들로 기본적인 UI 요소와, 흐름 그리기
저는 처음에 Framer의 캔버스에 형 형색으로 그래픽 요소들을 그렸습니다.
이것은 각 컴포넌트들이 차지하는 영역을 구분하기 쉽게 해 주었죠
그리고 저는 text와 visible 속성들을 실제 질문 데이터들로 바꾸기 위해 Override를 더 했습니다.
또한 이를 이용해서 어떤 선택 타입들이 어떤 텍스트를 갖고 보여야 하는지를 만들었습니다.
이 방법을 반복적으로 사용해, 저는 아래 결과물처럼 사용자의 선택에 따른 기본적인 UI 흐름을 만들었습니다
애니메이션을 Event 들과 Graphic 들에 더하기
드디어 Framer X 시간이네요
애니메이션을 위해 저는 usesAnimation Hook과 Override를 주로 사용하였습니다
가끔 채팅 버블처럼 반복적인 컴포넌트들은 코드 컴포넌트로 만든 뒤에 animate 속성을 더해서 이것이 등장할 때 자동으로 애니메이션이 실행되게끔 하였습니다.
사용자의 선택지가 어떤 위치로 정확히 가야 하는지 결정하는 것이 살짝 문제였습니다.
왜냐면 채팅 리스트의 width와 height가 지속적으로 변할 수 있었기 때문이죠
이것을 해결하기 위해 저는 react-measure라고 불리는 React 패키지를 Framer X에서 사용했습니다
아래는 제가 사용한 모든 NPM 패키지의 목록입니다
- framer — 1.0.5
- react — ^16.88
- @framer/benjamin.slider (store package)
- @framer/ruucm.index-frame (store package)
- styled-components
- axios
- lodash
- react-measure
- react-autosize-textarea
- react-helmet
- smoothscroll-polyfill
완전한 React 커뮤니티의 파워를 Framer X에서도 사용할 수 있다는 점은 정말 멋진 것 같습니다.
좋았던 점 👍
1. React 스탠다드 / 개발자 친화적
기본적으로 당신의 개발 스타일을 바꿀 필요가 없습니다
기존에 사용하던 React의 모든 것들을 여기서 사용할 수 있습니다.
Framer는 그리고 최근에 개발자들을 위한 툴인 'Bridge'를 내놓았습니다
이것은 Git 호환 포맷, Framer CLI, GitHub 액션들 등 을 포함합니다
실제로 저는 이 프로젝트의 모든 그래픽 요소와 코드 요소를 Git으로 관리하였습니다.
2. 모바일 테스트를 위한 Live Preview & 아주 빠른 Hot Reload
당신은 모바일 테스트를 위해서, ngrok을 사용하거나 모든 빌드된 파일을 staging 서버에 올릴 필요가 없습니다.
Framer X에서는 오른쪽 상단에 있는 버튼을 누르면 라이브 서버가 만들어지고
만들어지는 모든 변경사항들을 아주 빠르게 반영합니다
3. 그래픽적 요소보다, 더 필요한 요소들을 코딩하게끔
간단한 프로토 타입을 만들고 있지만 못생겨 보이게 하는 게 싫어서, 당신은 부트스트랩이나, Material 패키지들이 필요할지도 모릅니다.
Framer X를 사용한다면 엄청난 버튼들과 다른 컴포넌트들을 스토어에서 드래그 앤 드롭하거나, 포토샵처럼 그냥 그리시고, 기능적인 코드를 위에 Override 합니다
결과적으로 좀 더 중요한 코드들에 집중할 수 있게 되죠
실제 저는 Benjamin den Boer 가 만든 Slider를 여기에 드래그 앤 드롭하여 사용하였습니다
4. 유지보수
저는 중간에 클라이언트분이 앱의 외양을 바꾸길 원하셔서 몇몇 이미지들을 바꾸어야 했습니다
하지만 저는 코드들의 숲을 뒤질 필요가 없이, 그냥 헤더 레이어를 클릭하고 마치 파워포인트 이미지 바꾸듯이 이미지를 바꿀 수 있었죠!
멋지지 않나요?
5. Built-in 도구들과, 컴포넌트들
Data
이것은 제 생각에는 컴포넌트들 간 상태를 공유하는 꽤 간편한 방법입니다.
그리고 Framer Team 은 현재 좀 더 빠른 퍼포먼스를 가진 더 멋진 것을 개발 중에 있다고 합니다.
Stack
이것은 flex 속성을 이용한 간편하게 레이아웃을 짤 수 있는 멋진 React 컴포넌트입니다
Responsive
Frame 안에 있는 모든 요소들은 기본적으로 반응형이 될 수 있습니다
이것을 사용해 저도 이 앱의 반응형 레이아웃을 만들었습니다
조금 아쉬웠던 점 👎
1. 너무 급격한 업데이트
제가 이 프로젝트를 했던 기간은 프레이머 팀이 그들의 메인 애니메이션 라이브러리를 Pose와 결합하고 있던 시기였습니다
그래서 저는 한동안 애니메이션 코드들을 다시 짜야했었죠
그리고 그들은 아직 몇몇 Property 들과 Hook 들을 더하거나 빼고 있습니다.
2. Router 미지원
PageComponents 같은 요소를 대신해서 쓸 수는 있지만, 같은 것은 아닙니다.
3. IE 를 기본적으로 지원하지 않습니다
저도 역시 IE를 싫어합니다만, 몇몇 클라이언트들은 아직 그들의 웹사이트들이 IE에서 보이길 원합니다.
4. 커스텀 Webpack 설정 불가
Webpack 설정을 변경하는 방법이 아직 없습니다
결론
Framer X 는 정말이지 이 인터렉션이 많은 흥미로운 프론트 프로젝트를 하는데 있어서 시간을 많이 줄여 주었 습니다.
이것은 또한 오픈후 앱의 변화가 많을때도 유지보수하기 유용했습니다.
Framer X에서 코드들은 캔버스에 동시에 렌더링 됩니다.
그리고 그려진 그래픽 요소들도 더 이상 단순히 png 나 jpg로 남아 있을 필요가 없습니다.
당신이 사용자가 보고 있는 부분을 다루는 프론트엔드 개발자라면, 이것보다 훌륭한 도구가 있을까요?
👋 프로젝트 문의는 이 이메일로 연락 부탁드립니다 — ruucm.a@gmail.com
