소프트웨어 전문지 마이크로소프트웨어의 최신호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(Front-End)를 주제로 담았습니다. 자바스크립트, 정적 타입, 리액트, 뷰, 앵귤러, 일렉트론, ESNext 등 마소 393호의 주요 기사들을 IT조선 독자에게도 소개합니다. [편집자주]
오래 전부터 필자만의 앱 개발을 하고 싶었다. 하지만 경력상 모바일 앱과 관련 없는 개발을 하다 보니, 앱 개발 지식이 없다는 핑계로 미루고 있었다. 몇 년 전 문득 노드JS(Node.js)를 접하며 자연스럽게 자바스크립트를 공부하게 됐다. 혼자 웹 관련 파트를 시작해 jQuery, HTML5, CSS, 앵귤러(AngularJS) 1.x를 학습하면서 그 당시 다니던 회사 홈페이지를 MEAN 스택(MongoDB, ExpressJS, AngularJS, Node.js)으로 구현해보기도 했다.
우연히 아이오닉(Ionic)으로 프로토타입을 제작했다. 백엔드는 노드JS와 몽고DB로 헤로쿠(Heroku)를 활용해 앱을 하나 만들었다. 하지만 앵귤러 1.x의 몇몇 특성상 앱이 복잡해지기 시작했다. 양방향 데이터 연결(Two-Way Data Binding)이 난무하면서 앱 관리가 잘 되지 않겠다는 생각이 들었다. 그러던 중 리액트를 만났다. 리액트는 앵귤러 1.x와 비교해 단방향 데이터 연결(One-Way Data Binding)이라 단순했고, 가상 DOM(Virtual DOM)을 이용해 빠르게 렌더링할 수 있다는 점이 너무 마음에 들었다. 자연스레 리액트 네이티브도 접하면서 앱을 만들어 보고 싶어졌다.
새로운 기술 혹은 프레임워크를 학습할 때 제일 좋은 건, 그 기술을 이용해 프로젝트를 직접 만들어 보는 것이다. 평소 여행하면서 새로운 사람 만나기 좋아해, 여행 중 소그룹으로 현지인 혹은 다른 여행자들을 만날 수 있는 앱을 오래전부터 만들고 싶었던 차였다. 이참에 이 프로젝트를 진행해 보기로 했다.
내가 관심 있는 모임에 참여신청을 해 그 모임에 수락되면 단톡방이 자동으로 생성된다. 단톡방에서 서로 이야기하며 어떤 사람인지 알 수 있고, 세부 계획도 같이 짤 수 있다. 또한 나의 여행 도시를 날짜와 같이 등록을 하면 그 여행 도시에 사는 현지인과 그 시기에 여행하는 매칭된 다른 여행자의 목록을 확인할 수 있다. 또한, 모임을 만들 때 내가 사는 도시나 등록한 여행 스케줄에 매칭되는 새 모임이 생성되면 푸시 알림을 보내준다. 푸시 알림은 모임을 만들 때, 그 모임에 대한 푸시 알림을 다른 사용자들에게 보내는 옵션을 설정할 수 있다.
애플리케이션 개발을 본격적으로 시작하기 전에 고려해야 할 것들이 많았다. 일단 애플리케이션 기획과 UI/UX 디자인이 필요했다. 그러고 나서 애플리케이션 기능 명세를 작성하고, 각 기능을 프론트엔드와 백엔드 서버에서 구현할 프레임워크와 라이브러리를 리서치하고, 기술 스택을 정해야 했다. 때에 따라 학습도 당연히 필요했다.
앱 개발을 해보기는커녕 앱에 대한 기획이나 UI/UX 디자인에는 완전 문외한이라, 이 분야 일을 하시는 분과 같이 앱을 만들면서 리액트 네이티브에 대한 스터디와 개발에 집중하고 싶었다. 그래서 이전 여행하면서 느끼거나 필요했던 것들을 상기시키며 애플리케이션에 대한 기획안을 만들어 공유했다.
하지만 필자 혼자가 아닌 다른 멤버와 같이하게 되면, 최소한 비전 공유가 돼야 중도 포기하지 않고 진행할 수 있을 것 같아서 추가한 단계였다. 그러나 같이 작업을 맞추기가 생각대로 잘 안돼 실패하고 결국 혼자서 하게 됐다. 기획안을 기준으로 목업(Mockup)을 발사믹(Balsamiq)으로 작성했다. 발사믹으로 쉽고 빠르게 와이어 프레임을 만들 수 있었다.
대략적으로 기획과 앱에 대한 와이어 프레임이 나왔다. 기술 스택을 정할 차례였다. 정하기 전에 최대한 프론트엔드 개발에만 집중할 방법을 고민했다. 사실 리액트 네이티브를 마음속으로 생각하고 있었지만, 아이오닉과 사이에서 많은 고민을 했다.
리액트도 모르고 리액트 네이티브는 당연히 더더욱 모르던 시기였다. 아이오닉은 그래도 이전에 프로토타입도 만들어봤고, UI 작업을 좀 더 쉽게 할 수 있는 툴(레이아웃, 기본 컴포넌트 UI)도 제공됐었다. 또 아이오닉 마켓이 있어, 각종 플러그인과 테마를 쉽게 구할 수도 있었다. 하지만 많은 고민 끝에 롱런을 보고 리액트 네이티브로 결정했다. 앞서 앵귤러1에서 많은 불편함을 겪기도 했고, 리액트 네이티브를 어떻게든 해보고 싶은 생각이 컸다. 그렇게 프론트엔드를 결정했다.
강태종 필자의 리액트 네이티브에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.