모바일 앱 관련 미팅을 하면 거의 빠지지 않고 나오는 질문이 하나 있습니다.
"반응형 됩니까?"
PC에서도, 태블릿에서도, 스마트폰에서도 화면이 자연스럽게 맞춰지냐는 질문입니다. 당연한 요구입니다. 요즘은 기본적으로 핸드폰+태블릿+노트북 이렇게 가지고 다니는 사람들이 많기 때문입니다.
그런데 이 질문 앞에서 저는 항상 잠깐 멈춥니다.
"됩니다"는 맞는 말이지만, 정확한 말은 아닙니다
기존의 대부분의 고객들은 기간계 시스템을 넥사크로, 웹스퀘어, 이엑스빌더 같은 유료 UI 솔루션들로 구축해 놓았습니다. 물론 구축할 때 당연히 반응형으로 구축되었다고 합니다. 하지만 좀 더 자세히 들여다 보면 그렇지 않습니다.
즉, 다시말해서 정확하게는 반응형(Responsive)이 아니라 적응형(Adaptive)입니다.
비슷한 것 같지만 둘 간에는 차이가 있습니다.
반응형은 하나의 화면이 크기에 따라 유연하게 흘러갑니다. 적응형은 해상도별로 디자인을 미리 만들어 놓고, 해당 해상도에 맞는 화면을 골라서 보여줍니다. PC용, 태블릿용, 모바일용을 각각 따로 만들어야 합니다.
수정이 생기면 세 벌을 고쳐야 합니다. 공수가 최소 세 배가 듭니다.
반면 리액트 네이티브는 메타(페이스북)가 처음부터 모바일 환경을 기준으로 설계한 프레임워크입니다. 애초에 방향성 자체가 모바일에서 시작했습니다. 하나의 코드가 화면 크기에 따라 자연스럽게 흘러갑니다. 완벽한 반응형입니다.
솔루션별로 뜯어보면 차이가 보입니다
고객을 만나보는 현장에서는 크게 세가지로 솔루션 UI가 나뉩니다. 아래는 주요 항목 비교표입니다.
| 항목 | 넥사크로 | 웹스퀘어 | 이엑스빌더 | 리액트 네이티브 |
|---|---|---|---|---|
| 반응형 방식 | 적응형 | 적응형 | 적응형 | 반응형 |
| 라이선스 비용 | 유료 | 유료 | 유료 | 무료 |
| EOS 이후 지원 | 유상 계약 필수 | 유상 계약 필수 | 유상 계약 필수 | 커뮤니티 지속 지원 |
| 인력 수급 | 전문 인력 필요 | 전문 인력 필요 | 전문 인력 필요 | 인력 풀 풍부 |
| 자체 유지보수 | 어려움 (연간 10~15%) |
어려움 (연간 10~15%) |
어려움 (연간 10~15%) |
기본 교육 후 가능 (별도 유지보수료 없음) |
| OS 업데이트 대응 | 제조사 의존 | 제조사 의존 | 제조사 의존 | 자체 대응 가능 |
표만 봐도 방향이 보입니다.
유료 솔루션의 진짜 비용은 라이선스가 전부가 아닙니다
유료 UI 솔루션은 웹용 라이선스와 모바일용 라이선스가 별도입니다. 모바일 앱을 추가로 구축하면 모바일 라이선스를 따로 구매해야 합니다. 매년 도입가의 10~15%에 해당하는 유지보수 요율을 지불해야 합니다.
여기서 끝이 아닙니다.
제품이 EOS(End of Service)되면 기술 지원이 사실상 끊깁니다. 물론 바로 서비스를 종료하진 않지만 일정 유예 기간이 지나면 더 이상 기술 지원을 받을 수 없습니다. 또한 유상 유지보수 계약을 맺지 않으면 문의 자체가 어려워집니다. 모바일 OS가 업데이트될 때마다 솔루션 엔진 호환성 문제가 생기고, 그때마다 "새로운 버전으로 유료 업그레이드하라"는 말을 듣게 됩니다.
15년 동안 현장에서 반복적으로 목격한 패턴입니다.
유지보수 계약 구조 자체가 달라집니다
일반적인 유지보수 계약은 솔루션 + 개발 소스 전체를 묶어서 계약합니다. 솔루션도, 그 위에 올라간 화면 소스도, 전부 외부에 의존합니다.
하지만, 리액트 네이티브는 다릅니다.
버추얼 돔(Virtual DOM)이라는 기본 개념만 이해하면 전산실 내부 개발자가 화면 소스를 직접 수정할 수 있습니다. 버튼 위치를 바꾸거나, 메뉴를 추가하거나, 텍스트를 수정하는 수준의 일반적인 유지보수는 간단한 교육 한 번으로 자체 해결이 됩니다.
결국 모바일 플랫폼에 대한 유지보수만 외부에 맡기면 됩니다. 화면 소스는 직접 관리합니다.
매년 나가는 유지보수료가 눈에 띄게 줄어듭니다. 예들들어, 전체 시스템 구축비가 1억이라 가정하고 모바일 플랫폼 가격 5천만원, 시스템 개발비 5천만원이라 할때, 기존 유지보수 계약은 전체 1억에 대한 10%일때 1천만원이 되고, 리액트 네이티브인 경우 모바일 플랫폼 가격 5천만원에 10%인 500만원이 되는 것입니다.
그런데 단점도 있습니다
리액트 네이티브가 장점만 있는 건 아닙니다.
① 소스 이원화
리액트 네이티브는 모바일 전용 소스가 웹 소스와 별도로 존재합니다. 웹 시스템과 모바일 앱을 함께 운영하면 소스를 따로 관리해야 합니다. 운영 인력이 부족한 전산실이라면 사전에 반드시 고려해야 할 부분입니다.
② 초기 러닝커브
버추얼 돔 개념이 기존 HTML 방식과 달라서 처음 접하는 개발자에게는 학습이 필요합니다. 단, 한 번 익히면 이후 유지보수는 오히려 훨씬 수월합니다. 그리고 이미 유튜브에 수많은 강의들이 올라와 있습니다.
③ 네이티브 기능 연동 복잡도
생체인식, NFC, 카메라 같은 단말기 고유 기능을 연동할 때 별도의 네이티브 모듈 작업이 필요한 경우가 생깁니다. 모바일 플랫폼 파트너사와 사전에 충분히 협의가 필요합니다.
결국 매년 그 비용, 한 번만 계산해보시면 됩니다
현재 유료 UI 솔루션 도입가에 10~15%를 곱해보십시오. 그게 매년 나가는 유지보수료입니다. 5년을 곱하면 도입가의 절반에서 3분의 2가 추가로 나갑니다. EOS가 되면 업그레이드 비용이 또 들어옵니다.
그 비용을 내부 개발 역량 강화에 투자했다면 어땠을까요.
전 세계에서 가장 많은 개발자가 사용하는 프레임워크이기 때문에 트러블이 생겼을 때 해결책을 찾기가 쉽습니다. 이미 생태계가 워낙 방대하게 발달해 있어서 웬만한 이슈는 검색 한 번으로 해결됩니다. 특정 솔루션 제조사 엔지니어 일정을 기다릴 필요가 없습니다.
주도권이 전산실 안으로 들어옵니다.
비용을 아끼면서 주도권도 갖는 구조.
그게 리액트 네이티브가 현장에서 설득력을 얻는 진짜 이유입니다.
함께 보면 좋은 글
리액트 네이티브 도입 전에 프레임워크 선택의 전체 그림을 먼저 보고 싶다면. 우리가 HTML 앱을 5년 만에 버린 이유