HyWAI로 설계하는 웹 기반 하이브리드 모바일 플랫폼

웹 코드와 단말 기능 사이에 놓인 HyWAI

ETRI가 2010년에 공개한 HyWAI(Hybrid Web Application Interface)는 HTML5, CSS, JavaScript로 작성한 웹 애플리케이션을 안드로이드 환경의 단말 기능과 연결하는 모바일 응용 플랫폼 기술이다. 웹 기술의 변경 속도와 네이티브 API 접근성을 한 구조 안에서 다루는 데 초점이 있다.

핵심은 WebView 안에서 실행되는 JavaScript가 네이티브 브리지를 거쳐 하드웨어와 OS 서비스를 호출한다는 점이다. W3C Device API 철학을 따르는 추상화 계층으로 단말과 OS 버전 차이를 JavaScript API 뒤로 감추고, 웹 코드베이스를 중심으로 네이티브에 근접한 UX와 기능을 구현한다.

브리지가 요청을 전달하고 결과를 다시 웹으로 돌려주는 방식

웹 애플리케이션은 HyWAI JavaScript API를 호출하고, 이 호출은 안드로이드 네이티브 브리지를 거쳐 단말 서비스와 하드웨어에 도달한다. 위치나 카메라 같은 Device API와 지도·콘텐츠·결제 서비스 같은 Open API는 이 과정에서 함께 조합될 수 있다.

JavaScript와 네이티브 계층은 비동기 메시지 패싱으로 통신하며, 응답은 콜백 또는 프라미스 스타일로 처리한다. 권한과 오류 코드를 표준화하면 호출 주체인 웹 애플리케이션이 단말별 처리 차이를 직접 떠안지 않아도 된다.

⤢✕

웹 계층에서 확장 기능까지 연결하는 구성

웹 애플리케이션 계층은 표준 HTML5, CSS, JavaScript로 UI와 로직을 구성한다. 단일 코드베이스를 유지하기 쉬우며, Web Storage나 IndexedDB 대체 계층, 캐시를 이용해 부분적인 오프라인 동작도 지원한다.

Device API는 위치, 카메라, 가속도·자이로, 파일시스템, 네트워크 상태처럼 센서와 하드웨어에 접근하는 경로를 제공한다. 권한 모델과 연결하고 비동기 콜백 및 오류 코드를 표준화해 호출 흐름을 안정적으로 유지한다.

Open API 계층은 지도, 콘텐츠, 결제, 인증 등의 REST/JSON 기반 외부 서비스를 연결한다. API Key와 OAuth 같은 공용 인증 패턴, 네트워크 예외 처리 템플릿을 이 계층에서 다룬다.

매시업 엔진은 Device API와 Open API를 한 작업 흐름에 묶는다. 위치 기반 서비스, AR, 상황인지형 알림은 이 조합에서 만들어지며, 타임스탬프·위치 정확도 같은 데이터 정합성과 UI 오버레이 합성도 함께 관리한다.

개발과 운영 측면에서는 패키징·서명, 로그·디버깅 콘솔, 렌더 및 브리지 호출 지연 프로파일링을 지원한다. 플러그인 확장 구조를 두면 새로운 네이티브 기능을 점진적으로 도입할 수 있다.

위치·카메라·업무 데이터를 조합하는 장면

LBS 쿠폰이나 내비게이션에서는 사용자 위치와 네트워크 상태를 받아 GPS 정보로 Open API의 반경 검색을 수행한다. 이후 가맹점과 재고를 필터링해 근접 매장 쿠폰 또는 경로를 표시하며, 오프라인 상태에서는 캐시 데이터를 대신 사용할 수 있다.

AR 캠퍼스나 매장 가이드는 카메라 프레임, 가속도·자이로, 위치를 입력으로 사용한다. 포즈 추정 결과와 Open API의 관심 지점을 매칭한 뒤 AR 오버레이를 렌더링한다. 배터리 또는 온도 과열 상황에서는 실사 화면 대신 2D 지도로 폴백할 수 있다.

현장 점검과 검사 업무에서는 사진, 음성 메모, 바코드를 수집한다. 시간과 위치 메타데이터를 결합해 압축·암호화하고 업로드 재시도 큐로 넘긴다. 백엔드 등록에 실패하면 로컬 큐에 적재했다가 네트워크가 복구될 때 전송한다.

생산성과 UX에서 기대하는 변화

단일 웹 스택을 기반으로 개발하면 초기 개발 기간을 30~~50% 단축할 수 있으며, 팀 숙련도에 따라 편차가 존재한다. 네이티브 기능을 캡슐화하면 플랫폼 전환 비용을 낮추고 유지보수 비용 20~~40% 절감을 기대할 수 있다.

WebView 최적화와 브리지 호출 최소화는 체감 성능 개선에 기여한다. 경량 화면 기준으로 일부 UI에서 60fps 목표를 달성할 수 있다. 표준화된 API는 단말 파편화의 영향을 줄이고, 권한 및 네트워크 예외를 일관되게 처리해 장애율을 낮추는 데 쓰인다.

안드로이드 컨테이너를 준비하는 순서

먼저 Android SDK/Gradle, WebView 기반 컨테이너, HyWAI 브리지와 플러그인 모듈을 준비한다. 네트워크 보안 구성에서 HTTPS를 강제하고 서명 키 관리도 이 단계에서 정한다.

앱 구조에서는 싱글 페이지 또는 멀티 페이지 화면·라우팅, 상태 관리, 오프라인 캐시 정책을 결정한다. 위치, 카메라, 저장소 권한의 매트릭스를 정의하고 권한 거부 상황의 폴백 시나리오를 함께 설계한다.

Device API 호출 래퍼에는 타임아웃, 재시도, 오류 코드 맵핑을 넣고, Open API 클라이언트는 토큰 관리와 쿼터·레이트리밋 대응을 맡긴다. 배포 전에는 개발·스테이징·운영 빌드 변형을 분리하고 프로가드 및 리소스 최적화를 적용한다. 첫 화면 TTI, 브리지 왕복 지연, 렌더 프레임 드랍을 측정하며 오프라인과 권한 거부 조건의 장애 주입 테스트도 수행한다.

WebView와 HyWAI 브리지 호출 예시

전제조건: Android 5+ WebView, HyWAI JS 브리지 주입, fetch 지원 환경(구형 단말은 XHR로 대체).

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HyWAI LBS Demo</title>
  </head>
  <body>
    <div id="out">Loading...</div>
    <script>
      // Device API: 위치 획득
      function getLocation() {
        return new Promise((resolve, reject) => {
          if (!window.hywai || !hywai.location)
            return reject(new Error("HyWAI unavailable"));
          hywai.location.getCurrentPosition(
            (pos) =>
              resolve({
                lat: pos.latitude,
                lon: pos.longitude,
                acc: pos.accuracy,
              }),
            (err) => reject(new Error("LocationError:" + err.code)),
            { timeout: 5000, enableHighAccuracy: true },
          );
        });
      }

      // Open API: 주변 장소 검색(예시 URL, 실제 키/엔드포인트 교체)
      async function fetchPOI(lat, lon) {
        const resp = await fetch(
          `https://api.example.com/poi?lat=${lat}&lon=${lon}`,
          { headers: { Authorization: "Bearer TOKEN" } },
        );
        if (!resp.ok) throw new Error("OpenAPIError:" + resp.status);
        return resp.json();
      }

      async function run() {
        const el = document.getElementById("out");
        try {
          const { lat, lon } = await getLocation();
          const data = await fetchPOI(lat, lon);
          el.innerHTML = data.items
            .slice(0, 5)
            .map((i) => `<div>${i.name} - ${i.distance}m</div>`)
            .join("");
        } catch (e) {
          el.textContent = "대체 경로: 캐시 데이터 표시 또는 권한 안내";
          console.error(e);
        }
      }
      run();
    </script>
  </body>
</html>

권한·보안·성능이 만나는 운영 경계

권한은 기능을 실제로 사용하는 시점에 최소 범위로 요청하고, 거부됐을 때도 사용성을 유지할 대체 흐름을 제공한다. 초기에 일괄 동의를 받는 방식과 비교하면 UX가 분절될 수 있다.

Open API 통신은 HTTPS/TLS 1.2+로 보호하고, 인증서 고정 또는 키핀닝을 적용한다. 그 대신 인증서 갱신과 배포 관리가 복잡해진다. 위치와 식별자처럼 민감한 메타데이터는 최소 수집·익명화하며, 로컬 저장 시 암호화한다. 암복호화 비용은 성능 오버헤드로 이어질 수 있다.

브리지 성능은 호출을 배치하고 데이터를 압축해 개선할 수 있으며, 대용량 바이너리 전송은 스트리밍으로 처리한다. 구현 복잡도는 증가한다. 브리지 API 버전을 고정하고 capability negotiation을 적용하면 버전 호환성을 관리할 수 있지만, 신규 기능 도입 속도는 낮아질 수 있다.

하이브리드·네이티브·웹 전용 접근의 차이

유형	성능	확장성	일관성	안정성	운영 편의
HyWAI 하이브리드	네이티브 대비 80~95% (화면/기능별 상이)	플러그인으로 기능 확장 용이	JS API로 단말 차이 흡수	웹+네이티브 이중 스택 리스크 관리 필요	웹 기술 기반로 빠른 배포/수정
네이티브(Android)	최고 성능/저지연	SDK 직결, 하드웨어 최적화	단말 파편화 직접 대응 필요	OS/드라이버 종속성 높음	배포 주기 느림, 인력 전문성 요구
웹 전용(브라우저)	렌더 중심, 하드웨어 접근 제한	서버 사이드 확장 용이	브라우저별 렌더 편차 존재	스토어 의존 적음	즉시 배포, 권한 이슈 적음

주: 수치는 벤치마크/구현에 따라 변동, 최신 정보 확인 필요.

기존 하이브리드 자산을 검토할 때

HyWAI는 웹 기술만으로 네이티브와 유사한 수준의 모바일 기능을 제공하려는 하이브리드 플랫폼 지향 기술이다. Device API와 Open API의 매시업은 LBS와 AR처럼 여러 데이터와 단말 기능을 함께 쓰는 서비스를 빠르게 구성하는 기반이 된다.

권한, 네트워크, 성능 예외를 표준화하고 플러그인으로 기능을 확장하면 생산성과 유지보수 효율을 높일 수 있다. 다만 브리지 오버헤드와 웹·네이티브 이중 스택의 복잡도는 별도로 관리해야 한다. Cordova/Capacitor, PWA, WebView 고도화와의 비교 및 마이그레이션 전략은 기존 하이브리드 자산을 보유한 조직에서 검토할 대상이다.