暗号資産取引所アプリの再構築
Web画面を包んで表示していた暗号資産取引所アプリを、アプリ独自の画面として作り直す転換作業に参加しました。取引所アプリは、ユーザーがリアルタイムの相場を見ながら暗号資産を売買し、保有資産と注文状況を確認する場所です。既存のWeb画面の取引の流れと情報構造を読み取って移しつつ、相場・資産・注文のように絶えず変わるデータが画面で誤って見えないようにすることが要でした。取引所の画面で相場や資産が誤って表示されると、ユーザーは間違った数字を見て注文することになります。5人で分担したチームで、画面の状態管理、画面遷移の構造、相場・取引・資産画面の実装を担いました。
Web画面の取引の流れを読み取り、アプリ画面へ移した転換
既存の暗号資産取引所アプリは、Web画面をアプリ内に表示する構造でした。このWeb画面の取引の流れと情報構造を分析し、同じ流れをアプリ自身が描く画面へ移しました。ユーザーが慣れた順序は守りながら、性能と使い勝手はアプリ画面の側で改善する方向で実装しました。

相場・資産・注文が同時に変わってもずれない画面の状態
取引所アプリでは、相場、資産、注文、画面遷移といったイベントが同時に起きます。ユーザー入力、サーバー応答、画面更新を一つのデータの流れにまとめ、複雑な画面の状態を追いやすくしました。相場の変化やユーザーの資産のような敏感な数字が画面に誤ったまま残らないよう、画面更新の流れを点検しました。

入口の多い画面遷移を一か所で受け持つ構造
取引所アプリは、ログイン、資産、注文、詳細画面へ入る経路がいくつにも分かれています。画面をどこからどこへ移すかを決める責任を各画面から切り離し、画面遷移を別に管理するようにしました。画面ごとに遷移のコードを抱えないため、新しい画面を加えるときに既存の画面に手を入れる箇所が減ります。

数字の詰まった相場・取引画面をコードで組んだ再利用部品
取引所アプリの相場一覧、取引画面、資産画面は、一つの画面に数字がぎっしり入ります。画面配置を画面設計ツールではなくコードで組み、複数の画面が同じ部品を使い回し、レイアウトの構造がはっきり分かるようにしました。社内3人と社外2人のチームで、既存の実装方式と新しい構造が混在する中、画面の作り方とコードのスタイルを合わせながら作業しました。

この仕事のポイント
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…



