自動投資管理サービス
投資性向に合わせてAIが国内外の株式・ETF・年金商品でポートフォリオを組み、資産比率を定期的に調整し直す自動投資サービスのアプリを作りました。別プラットフォームで先に出ていたアプリのソースと画面の動きを直接分析して実装範囲を決め、移植先プラットフォームの画面構造に合わせて組み直しました。収益率と資産比率は投資家が最も敏感に受け止める数字で、表示がずれるとすぐに信頼の問題になります。作業は投資状況のチャート、商品加入の流れ、金融情報画面の表示点検までです。
ソースから読み、画面の流れに合わせて組み直した移植
自動投資アプリは別プラットフォームで先に出ており、作業はそのアプリのソースと画面の動きを直接分析するところから始めました。分析した機能を整理して実装範囲を決め、既存の実装をそのまま写すのではなく、移植先プラットフォームの画面構造とユーザーの流れに合わせて組み直しました。日程が短かったため機能単位で優先順位を分け、商品加入の流れと投資チャート画面を中心に、速さと安定性を両立させました。

数字より先に形で読める投資チャート
自動投資アプリの投資状況画面は、収益率・資産比率・統計データをチャートで見せます。アルゴリズムが資産比率を定期的に調整し直すサービスなので、投資家は今お金がどの資産にどれだけ入っているかをこのチャートで確認します。折れ線・棒・円の3種類のチャートを画面の目的に合わせて使い分け、投資家が数字を一つずつ読む前に、投資成果とポートフォリオの構成を形で先に把握できるようにしました。チャートの種類と表示するデータは、その画面が答えるべき問いに合わせて画面ごとに選びました。

商品カードをめくりながら、そのまま進む加入
ロボアドバイザーの商品加入は、国内外の株式・ETFから個人年金・退職年金まで、複数の投資商品と説明をカードで並べ、横にめくりながら選ぶ流れです。商品を見ているうちに自然に次のステップへ進めるよう、カード型の画面とめくる動作を構成しました。商品画面は載せる内容が多いため区画単位に分けて組み、区画ごとにデータ構造とセル構成を分離して、機能の追加や修正のときにその区画だけ触れば済むようにしました。

収益率の一マスもずれないようにした金融画面の点検
投資情報・商品説明・収益率の表示は、投資家が最も敏感に受け止める金融データです。こうした画面で表示の誤りや画面間の状態の不一致が起きないよう、細かなケースを一つずつ点検しました。同じ収益率が画面ごとに違って見えると、投資家は計算より先にサービスを疑うからです。

この仕事のポイント
先行アプリをソースから分析し、別プラットフォームへ移した実装
収益率・資産比率・統計を折れ線・棒・円グラフに分けて見せる投資状況
商品カードをめくりながら加入ステップへつながる投資商品の加入フロー
インサイト
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…



