암호화폐 거래소 앱 재구축
웹 화면을 감싸 보여 주던 암호화폐 거래소 앱을 앱 자체 화면으로 다시 만드는 전환 작업에 참여했습니다. 거래소 앱은 사용자가 실시간 시세를 보며 가상자산을 사고팔고, 보유 자산과 주문 상태를 확인하는 곳입니다. 기존 웹 화면의 거래 흐름과 정보 구조를 읽어 옮기되, 시세 · 자산 · 주문처럼 계속 바뀌는 데이터가 화면에서 틀리게 보이지 않게 하는 것이 핵심이었습니다. 거래소 화면에서 시세나 자산이 잘못 보이면 사용자는 틀린 숫자를 보고 주문하게 됩니다. 다섯 명이 나눠 맡은 팀에서 화면 상태 관리, 화면 이동 구조, 시세 · 거래 · 자산 화면 구현을 함께 했습니다.
웹 화면의 거래 흐름을 읽어 앱 화면으로 옮긴 전환
기존 암호화폐 거래소 앱은 웹 화면을 앱 안에 띄워 보여 주는 구조였습니다. 이 웹 화면의 거래 흐름과 정보 구조를 분석해, 같은 흐름을 앱이 직접 그리는 화면으로 옮겼습니다. 사용자가 익숙한 순서는 지키면서, 앱 성능과 사용 경험은 앱 화면 쪽에서 개선하는 방향으로 구현했습니다.
시세 · 자산 · 주문이 동시에 바뀌어도 어긋나지 않는 화면 상태
거래소 앱에서는 시세, 자산, 주문, 화면 전환 같은 이벤트가 동시에 일어납니다. 사용자 입력과 서버 응답, 화면 갱신을 하나의 데이터 흐름으로 묶어, 복잡한 화면의 상태를 추적하기 쉽게 만들었습니다. 시세 변화와 사용자 자산처럼 민감한 숫자가 화면에 틀리게 남지 않도록 화면 갱신 흐름을 점검했습니다.
진입 경로가 많은 화면 이동을 한곳에서 맡는 구조
거래소 앱은 로그인, 자산, 주문, 상세 화면으로 들어가는 경로가 여러 갈래입니다. 화면을 어디서 어디로 옮길지 정하는 책임을 각 화면에서 떼어 내, 화면 이동을 따로 관리하도록 했습니다. 화면마다 이동 코드를 품지 않으니, 새 화면을 더할 때 기존 화면을 덜 건드리게 됩니다.
숫자가 빽빽한 시세 · 거래 화면을 코드로 짠 재사용 부품
거래소 앱의 시세 목록, 거래 화면, 자산 화면은 한 화면에 숫자가 빽빽하게 들어갑니다. 화면 배치를 화면 설계 도구 대신 코드로 짜서, 여러 화면이 같은 부품을 다시 쓰고 레이아웃 구조가 분명하게 드러나도록 했습니다. 내부 세 명과 외부 두 명이 함께한 팀이라, 기존 구현 방식과 새 구조가 섞인 가운데 화면 구현 방식과 코드 스타일을 맞춰 가며 작업했습니다.
이 작업의 포인트
웹 화면 기반 거래소 앱을 앱 자체 화면으로 전환
시세 · 자산 · 주문이 함께 바뀌는 화면의 실시간 갱신 흐름 정리
로그인 · 자산 · 주문 · 상세로 이어지는 화면 이동 구조 분리
인사이트
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…