📃 HTML, SCSS, Typescript, Swift
🔧 Ionic Angular, Capacitor, AWS Amplify, Android Studio, XCode
🎨 Zeplin
QuilteNote(퀼트노트)는 스타트업 운영 당시 핵심적인 사업 아이템이었던 Quilted(퀼티드)의 사용성을 테스트해보기 위해 만들었던 모바일 글 작성 앱입니다.
퀼트노트는 퀼티드와 유사하게 ‘글’을 ‘단락의 조합’으로 정의한 것이 특징입니다. 따라서 하나의 글을 작성하면 그 글을 구성하는 단락들이 따로 저장되게끔 설계되었습니다. 덕분에 사용자는 글을 쓰는 과정에서 기존에 작성했던 글들의 특정 단락들만 불러와 재사용할 수 있어, 정보량이 많은 글을 작성할 때 글 작성 시간을 크게 단축시킬 수 있습니다.
퀼트노트는 퀼티드의 UI/UX를 개인 수준에서 테스트해보기 위한 목적이었던 만큼, 퀼티드 개발을 염두에 두고 기획되었습니다.
Quilted는 웹과 모바일 환경 모두에서 서비스할 것을 염두에 두고 구상된 서비스였기 때문에 퀼트노트 또한 PWA로 만들기로 하였습니다.
프론트엔드 구현에는 제가 기존에 익숙하게 활용하던 Angular을 활용하기로 하였습니다. Angular를 활용해 PWA를 만드는 편리한 방법 중 하나는 Ionic Capacitor 를 활용하는 것이었습니다. Capacitor를 활용하면 하나의 코드로 안드로이드와 iOS를 모두 빌드할 수 있을뿐 아니라, 다양한 Native API도 활용할 수 있었습니다. 또한 필요에 따라 플러그인을 직접 만들어 추가할 수 있는 방법을 지원해준다는 장점이 있었습니다.
프론트 작업에선 ‘경험의 부재’에서 오는 어려움이 컸습니다.
예컨대 단락들을 모아두는 공간인 ‘퀼트’ 탭은 핀터레스트 등에서 활용하는 masonry layout 으로 구성되었는데, 서로 다른 길이의 요소들을 어떻게 쌓아야 할지 몰라 애를 먹었습니다. 결국 요소들의 위치를 일일이 직접 지정하는 방식으로 구현하기는 했으나 일정 부분 성능 문제는 감수해야했습니다.
한편 PWA를 만드는 것도 당시의 저에겐 꽤 큰 도전이었습니다. 웹 작업은 기존에 연습해오던 것이 있었지만, 스마트폰에서 동작하는 애플리케이션을 만드는 것은 처음이었기 때문입니다.