미니앱의 개발자 도구
개발자 경험 #
이제 미니앱 자체에 대해서 이해했으니, 여러 슈퍼앱 플랫폼들의 개발자 경험에 대해서 집중해봐요. 미니앱 개발은 슈퍼앱 플랫폼에 의해서 무료로 제공되는 IDE 위에서 개발돼요. 여러 플랫폼이 존재하지만, 여기에서는 가장 유명한 4사의 개발 경험과, 비교를 위해 QuickApp의 개발 경험에 대해서 이야기해볼게요.
미니앱 IDE들 #
슈퍼앱들이 그런 것처럼 대부분의 IDE 또한 중국어로만 제공돼요. 영문 버전은 최신 버전이 아닐 수도 있으니 중국어 버전을 설치하는 것을 권장해요. macOS 개발자라면 어떤 앱들은 디지털 서명이 되어있지 않아 운영 체제에서 실행을 거부할 수도 있어요. 본인의 책임 아래, Apple의 도움말을 따라 이를 묵인하고 실행할 수 있어요.
미니앱 시작 프로젝트 #
모든 슈퍼앱 제공자들은 다운로드하고 테스트해볼 수 있는 데모 앱들을 제공해요. 어떤 데모 앱들은 IDE의 New Project 생성 기능과 연동되어 있기도 해요.
개발 과정 #
IDE와 (데모) 미니앱을 불러오거나 생성한 이후에는 대부분 로그인하는 것으로 시작해요. 이를 위해서는 로그인된 슈퍼 앱으로 IDE에서 생성해주는 QR 코드를 스캔하면 돼요. 아주 드물게 비밀번호를 입력해야할 수도 있어요. 로그인이 되고 나면 IDE에서 개인 정보를 인식해서 프로그래밍, 디버깅, 테스팅을 하거나 앱을 제출하고 리뷰를 받을 수 있어요. 다음 스크린샷으로 5개의 IDE에서 이를 하는 과정을 알아볼 수 있어요.
위에서 확인할 수 있듯 모든 IDE들의 기본 요소들은 비슷해요. 거의 항상 VS Code에서도 사용하는 Monaco Editor 기반의 코드 에디터가 있고, Chrome DevTools frontend에 기반한 디버거가 있어요. IDE 자체는 NW.js나 Electron 앱으로 만들어져 있어요. 시뮬레이터는 Chromium <webview> tag에 기반한 NW.js <webview> tag나 Electron <webview> tag으로 만들어져 있어요. IDE의 내부 구조에 대해서 궁금하다면, Chrome 개발자 도구를 여는 단축키인 Control+Alt+I (Mac의 경우 Command+Option+I)로 간단하게 확인해볼 수 있어요.
<webview> 태그라는 것을 알 수 있어요.시뮬레이터, 실제 기기 테스팅, 그리고 디버깅 #
시뮬레이터는 우리가 알고 있는 Chrome 개발자 도구의 Device Mode와 비슷해요. 서로 다른 안드로이드나 iOS 기기에서 테스트하고, 크기나 기기 방향을 바꿔보고, 다양한 네트워크 환경과 메모리 압축, 바코드 인식 이벤트, 예상치 못한 강제 종료, 그리고 다크 모드 등을 테스트할 수 있어요.
내장된 시뮬레이터만으로 앱이 어떤 느낌으로 동작할지 확인할 수 있지만, 실제 웹앱처럼 실 기기 테스팅 또한 필요해요. 개발 중인 미니앱은 QR 코드를 인식하는 것만으로 간단하게 테스트할 수 있어요. 예를 들어, ByteDance의 개발자 도구는 실시간으로 생성된 미니앱의 QR 코드를 스캔하는 것만으로 클라우드에서 미니앱을 다운 받아 테스트할 수 있게 해줘요. ByteDance가 이를 구현한 방식은, QR 코드 자체의 URL(예시)이 앱 호스팅 페이지로 리다이렉트되며 (예시), 리다이렉트된 페이지에서 특정한 URI Scheme을 가지고 있는 방식이에요 (위의 예시의 경우 snssdk1128://). 이 URI Scheme으로 ByteDance의 슈퍼앱인 Douyin이나 Toutiao 같은 앱에서 즉시 미니앱을 실행할 수 있어요 (예시). 다른 슈퍼앱 제공자는 미니앱 페이지로 가는 것이 아니라, 미리보기 화면을 바로 열어요.
더 강력한 기능은 클라우드 기반의 미리보기 원격 디버깅이에요. IDE에서 생성된 QR 코드를 스캔하고 나면 미니앱이 실 기기에서 구동되고, 컴퓨터에서는 Chrome 개발자도구가 열려 원격으로 디버깅을 할 수 있어요.
디버거 #
요소 디버깅 #
미니앱의 디버깅 경험은 Chrome 개발자 도구로 디버깅을 해본 사람이라면 익숙한 경험이에요. 하지만 미니앱 개발의 워크플로우를 위해 변경된 아주 중요한 몇 가지 차이점들이 있어요. Chrome 개발자 도구의 Elements panel 대신, 미니앱들은 자신들의 고유 HTML 방언을 사용하는 커스텀 패널이 존재해요. 예를 들어, WeChat의 경우 그 방언을 Wxml(WeiXin Markup Language)이라고 불러요. Baidu의 경우 Swan Element라고 하며, ByteDance의 경우 Bxml이라고 해요. Alipay는 AXML라고 하고, QuickApp의 경우는 그 패널을 단순히 UX라고 해줘요 이 마크업 언어들에 대해서는 추후에 다룰게요.
<image>를 WeChat 개발자 도구로 분석하는 모습커스텀 요소들의 기반 #
WebView를 about://inspect/#devices 페이지를 통해 실 기기로 분석해보면 WeChat 개발자 도구의 숨겨진 비밀을 알 수 있어요. WeChat 개발자 도구에서 <image>라고 나온 엘리먼트가 사실은 <wx-image>라는 커스텀 요소이고 그 요소는 <div>를 유일한 자식 요소로 가지고 있어요. 신기하게도, 이 요소들은 Shadow DOM을 사용하지 않아요. 이 컴포넌트들에 대해서는 추후에 더 다룰게요.
<image> 요소를 WeChat 개발자 도구로 분석해보면 사실은 <wx-image> 요소라는 것을 알 수 있어요.CSS 디버깅 #
또 다른 차이점은, CSS의 여러 방언에 새로운 길이 단위인 rpx(반응형 픽셀; Responsive Pixel)가 존재한다는 점이에요. WeChat 개발자 도구는 기기에 영향을 받지 않는 CSS 길이 단위를 이용해 서로 다른 기기에서 개발을 해도 직관적인 개발 경험을 줘요.
200rpx 0)의 패딩을 WeChat DevTools로 분석하는 모습.퍼포먼스 분석 #
퍼포먼스는 미니앱의 최전방이자 중심이에요. 때문에 WeChat 개발자 도구를 비롯한 여러 개발자 도구들은 Lighthouse와 유사한 성능 측정 도구를 제공해요. 주 관심 분야는 Total, Performance, Experience, 그리고 Best Practice예요. IDE 내 모습은 조금씩 다를 수 있어요. 아래 스크린샷에서는 코드 에디터를 잠시 가려서 분석 도구가 크게 보일 수 있도록 했어요.
가상 API #
별도의 서비스를 설정하지 않고 WeChat 개발자 도구 안에서 API 응답을 가상으로 구성할 수 있어요.
감사의 말 #
이 글은 Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, 그리고 Keith Gu에 의해 리뷰되었어요.