グローバルショッピングサービスの拡張
大手電機メーカーがスマートフォン・テレビ・家電を直接販売するグローバル公式ショッピングアプリを、一方のプラットフォームですでに動いていた実装と画面の流れを基準に、別のプラットフォームへ素早く移しました。このアプリはWeb画面をアプリの枠の中に表示するハイブリッド構造で、同じWebページでも実行環境ごとに動きが違い、問題がWeb側かアプリ側かをまず見分ける必要がありました。アプリの枠、Web画面への入り口、外部リンク、アプリ権限を新しいプラットフォームに合わせて実装し、直接直しにくいWeb画面はアプリからスクリプトを入れて補いました。Webチームと問題を分担して解決し、アプリ審査で受けた修正要求を反映して配布しました。
Webで動くショッピングサービスをアプリの枠に収めて移したハイブリッドアプリ
グローバルショッピングアプリは、Webで運営されるショッピングサービスをアプリの枠の中に表示するハイブリッド構造です。顧客はこのアプリで製品を注文し、会員特典を受け、配送状況をリアルタイムで確認して通知で受け取ります。他プラットフォーム版は、既存アプリの実装と画面の流れを基準に素早く移して作りました。Web画面を収めるアプリの枠、Web画面への入り口、外部リンクの処理、アプリ権限など、プラットフォームごとに異なる部分を整理し、配布できる形で実装しました。Webコンテンツの読み込みや、アプリ機能とWebの境界で起きる問題もアプリの枠の側で調整しました。

直しにくいWeb画面をアプリから補ったスクリプト注入
グローバルショッピングサービスのWeb画面は、アプリ開発側から直接直しにくい領域でした。企画された画面や例外がWebで処理されないときは、アプリがWeb画面にスクリプトを入れてコードのレベルで補いました。ページの構成状態と読み込みのタイミング、条件によって表示すべき画面を確かめながら、必要な処理だけを適用しました。

同じページを三つの環境で比べて分けた修正範囲
ハイブリッドショッピングアプリのWebページは、モバイルブラウザ、このアプリ内のWeb画面、他プラットフォームのアプリのWeb画面で動きが分かれることがあります。Webチームと三つの環境を並べて比べ、問題がWeb側かアプリの枠の側かをまず見分けました。そのうえで、各担当者が直す範囲を分担する形で問題を解決しました。

予想外の審査要求をすぐに反映した配布
グローバルショッピングアプリの配布過程でアプリ審査から修正要求を受け、その中にはアプリ内の機器関連の画像をすべて外すよう求めるものもありました。フィードバックを素早く反映し、再審査に必要な修正範囲を整理しました。企画、Web、アプリ、検収、審査が段階ごとに分かれた環境だったため、要件が変わったり例外が起きたりするたびに素早く連絡を取り、直すことで、配布が揺らがずに済みました。

この仕事のポイント
既存の実装と画面フローを基準にしたハイブリッドショッピングアプリの移植
直接直しにくいWeb画面を、アプリから入れたスクリプトで補完
実行環境ごとにWeb・アプリの責任を分けた問題解決と審査対応
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



