UI Storyboard · Desktop + Mobile
Zenith 거래 화면을 PC·태블릿·모바일 미리보기와 번호 설명으로 정리했습니다. 개발 지식이 없어도, 어디에 무엇이 보이고 무엇을 누르면 되는지를 따라 읽을 수 있게 풀어 썼습니다. 제품 UI는 밝은 Zenith 스타일, 이 문서 껍데기는 Manifest 퍼블리싱입니다.
읽는 방법 · 왼쪽 목업의 초록 숫자(①②③…)와 아래 표의 번호가 같습니다. 표를 읽으면 ‘그 자리에서 사용자가 보는 것·할 수 있는 일’을 알 수 있습니다. 기능의 법적·기술 정의는 사양서(/spec), 말의 뜻만 보려면 용어사전(/glossary)을 참고하세요.
한눈에
PC에서 Zenith를 열면 나오는 ‘거래소 한 장’입니다. 위쪽은 브랜드와 지갑, 그다음 줄은 지금 고른 코인 쌍의 시세, 가운데는 차트·호가·주문, 아래는 내 주문·체결·성과입니다. 주소는 보통 https://dev.zenith-dex.xyz 같은 형태로 열립니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 왼쪽 위 — 브랜드 | 산 모양 마크와 ‘Zenith’ 이름이 항상 보입니다. 언어를 한국어·영어로 바꿔도 이 자리는 그대로입니다. 옆에 작은 버전 표시(예: v0.1.11 · dev)가 있어, 지금 보고 있는 배포가 어떤 버전인지 구분할 수 있습니다. |
| 2 | 오른쪽 위 — 접속·언어·지갑 | Online 숫자: 지금 이 사이트에 들어와 있는 대략의 사람 수입니다. 언어 버튼으로 화면 글자를 바꿉니다. 지갑을 아직 안 연결했으면 ‘Select Wallet(지갑 선택)’ 버튼이 보이고, 연결되면 주소가 짧게 줄여져 보입니다. 그 주소를 누르면 연결을 끊을지 묻는 창이 열립니다. |
| 3 | 시세 한 줄 (마켓 바) | 거래 페어 이름(예: SOL / USDC)과 ▾ 버튼, 현재가(Mark), 24시간 등락(%), 24시간 거래량, 스프레드(사려는 최고가와 팔려는 최저가의 간격), Live(실시간 연결됨)가 한 줄에 있습니다. 페어 옆 ▾을 누르면 다른 코인 쌍을 고르는 검색 창이 열립니다. 네트워크(체인) 상태가 좋지 않으면 화면 위쪽에 안내 배너가 잠깐 뜰 수 있습니다. |
| 4 | 가운데 배치 — 차트 · 호가 · 주문 | 왼쪽 큰 칸은 가격 차트(캔들), 가운데는 호가창(누가 얼마에 사고팔겠다고 올렸는지)과 방금 시장에서 이뤄진 체결 목록, 오른쪽은 내가 지정가 주문을 넣는 칸과 잔고입니다. 아래에서 위로 ‘가격을 보고 → 호가를 보고 → 주문을 넣는’ 흐름입니다. |
| 5 | 아래 — 내 활동 탭 | 미체결 주문(아직 안 체결된 내 주문), 내 체결 내역, 성과 요약을 탭으로 바꿉니다. 지갑을 연결해야 내 것이 채워집니다. |
| 6 | 검색·지갑 창이 열려 있을 때 | 마켓 검색이나 지갑 연결 창이 떠 있으면, 차트 실시간 깜빡임을 잠시 줄여 화면이 덜 산만해지도록 합니다. 창을 닫으면 다시 실시간으로 돌아갑니다. |
한눈에
거래하고 싶은 코인 쌍을 고르는 팝업입니다. 홈 시세 줄의 페어 이름 옆 ▾을 누르면 열립니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 즐겨찾기 / 전체 | 위에 ‘즐겨찾기’와 ‘전체’ 탭이 있습니다. 즐겨찾기는 자주 보는 페어만, 전체는 상장된 목록 전부입니다. (즐겨찾기 별 표시는 목록에서 고를 수 있습니다.) |
| 2 | 검색창 | 이름(심볼)뿐 아니라, 토큰 주소처럼 긴 문자열로도 찾을 수 있습니다. 창 바깥을 클릭하거나 Esc, 닫기(×)로 창을 닫습니다. |
| 3 | 목록에 보이는 정보 | 각 줄에 페어 이름, 대략의 가격 움직임(24시간 %), 24시간 거래량이 보입니다. 거래량은 ‘그 페어가 최근에 얼마나 활발했는지’를 가늠하는 숫자입니다. |
| 4 | 한 줄을 고르면 | 차트·호가·주문·잔고·미체결이 모두 그 페어 기준으로 바뀌고 창이 닫힙니다. 잘못된 페어를 골랐다면 다시 ▾을 눌러 바꾸면 됩니다. |
한눈에
암호화폐 지갑을 사이트에 연결하는 창입니다. 연결해야 주문·취소·내 잔고·내 체결을 쓸 수 있습니다. Zenith는 Solana 네트워크의 Phantom 지갑을 기준으로 안내합니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
dapp name: Zenith · Solana network
34연결 후 잔고 · 미체결 · Limit 서명 사용
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 안내 문구 | Solana 지갑을 연결해 달라는 짧은 설명이 있습니다. Esc로 닫을 수 있습니다. 다만 ‘연결 중’일 때는 실수로 닫히지 않도록 막는 경우가 있습니다. |
| 2 | Phantom으로 연결 | PC에서는 브라우저에 깐 Phantom 확장 프로그램, 휴대폰에서는 Phantom 앱으로 연결합니다. 설치가 없으면 설치 안내가 나옵니다. 한 번 연결에 성공한 주소는 다음에 사이트를 다시 열어도 기억해 두려고 합니다(브라우저 저장). |
| 3 | 연결 후에 할 수 있는 일 | 잔고 조회, 미체결·내 체결 보기, 지정가 주문 넣기/취소하기가 열립니다. 주문이나 취소를 할 때마다 Phantom에서 ‘이 거래에 동의할까요?’ 같은 승인 창이 따로 뜹니다. 사이트만으로 돈이 나가지 않고, 항상 지갑 승인이 한 번 더 있습니다. |
| 4 | 거절·실패했을 때 | 승인 창에서 거절하거나, 확장/앱이 없거나, 네트워크가 끊기면 창 아래쪽에 이유를 쉬운 말로 보여 줍니다. 연결이 진행 중일 때는 버튼을 연타하지 못하게 잠시 비활성화합니다. |
| 5 | 연결 끊기 | 헤더에 보이는 짧은 주소를 누르면 확인 창이 뜹니다. 확인하면 이 사이트와의 연결만 끊고, Phantom 앱 자체 계정은 그대로입니다. 다시 거래하려면 Select Wallet으로 재연결하면 됩니다. |
한눈에
주식 앱의 ‘봉차트’와 비슷합니다. 초록/빨강 막대(캔들) 하나로 ‘그 시간 동안 얼마에 시작해서, 최고·최저가, 마지막 가격’을 봅니다. 전문 용어 OHLC는 시가·고가·저가·종가입니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
?before=&after=| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 기본으로 보는 법 | 오른쪽이 더 최근, 왼쪽이 더 과거입니다. 마우스로 좌우로 끌거나(모바일은 손가락) 과거·최근을 살펴봅니다. 손을 뗀 뒤 관성으로 미끄러지는 애니메이션은 쓰지 않아, 멈춘 자리에서 바로 읽을 수 있습니다. |
| 2 | 시간 간격(봉 길이) | 1분 · 5분 · 15분 · 30분 · 1시간 · 4시간 · 하루 · 주 단위로 바꿀 수 있습니다. ‘1분’이면 짧은 움직임을, ‘하루’면 큰 흐름을 보기 좋습니다. 처음 들어오면 보통 1분 봉을 보여 줍니다. |
| 3 | 과거를 더 불러오기 | 왼쪽으로 더 밀면 서버에서 더 이전 봉을 가져옵니다. 한 번에 너무 많은 봉을 메모리에 두지 않도록, 아주 오래 밀어 두면 반대쪽(최신)이 잠깐 화면 밖으로 밀릴 수 있습니다. 그때는 아래 ‘최신으로’로 돌아오면 됩니다. |
| 4 | 「최신」으로 돌아가기 | 실시간 끝(지금 가격)에서 멀리 떨어지면 ‘최신’(또는 비슷한) 버튼이 뜹니다. 누르면 다시 가장 최근 구간으로 맞춥니다. |
| 5 | 실시간으로 움직이는 끝 봉 | 지금 보고 있는 구간이 ‘최신’에 붙어 있을 때만, 시세가 바뀔 때마다 맨 오른쪽 봉이 조금씩 갱신됩니다. 과거만 보고 있으면 끝 봉을 억지로 바꾸지 않습니다. |
| 6 | 시가·고가·저가·종가 한 줄 | 차트 위 툴바에 시각과 O/H/L/C 숫자가 한 줄로 나옵니다. 마우스를 봉 위에 올리면(모바일은 터치로 가리키면) 그 봉의 숫자로 바뀌고, 손을 떼면 다시 맨 끝(최신) 봉 요약으로 돌아갑니다. 숫자의 자릿수는 호가에 쓰는 표기와 맞춥니다. |
| 7 | TradingView 표시 | 차트 라이브러리 라이선스 고지는 차트 안 작은 로고로만 둡니다. 모바일에서 툴바 글자가 두 줄로 깨지지 않게 하기 위함입니다. |
한눈에
‘지금 시장에 나와 있는 사겠다는 가격·팔겠다는 가격’과 ‘방금 체결된 거래’를 보는 칸입니다. 내 주문만 보는 곳(미체결·내 체결)과는 다릅니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 호가 / 체결 탭 | 「호가(Order Book)」는 아직 대기 중인 매수·매도 희망 가격 목록입니다. 「체결(Trades)」은 이미 성사된 최근 거래(시장 전체)입니다. |
| 2 | 호가 화면 구성 | 위쪽은 매도(빨강, 비싸게 팔겠다는 쪽), 아래쪽은 매수(초록, 싸게 사겠다는 쪽), 가운데에 중간가와 스프레드가 있습니다. 각 줄에 가격·수량·금액·(가능하면) 주문자 주소 일부가 보입니다. 줄을 클릭하면 오른쪽 주문 칸의 가격에 그 값이 바로 들어갑니다. |
| 3 | 실시간 갱신 | 호가는 자동으로 갱신됩니다. 아직 주문이 거의 없으면 ‘비어 있다’는 안내가 나옵니다. 상단 Live 표시와 함께 움직인다고 보면 됩니다. |
| 4 | 시장 체결 목록 | 시간·가격·수량이 쌓입니다. ‘내가 한 거래만’이 아니라 시장에서 방금 일어난 거래입니다. 내 것만 보려면 아래 ‘내 체결 내역’ 탭을 씁니다. |
| 5 | 네트워크가 느릴 때 | 체인 RPC가 바쁘거나 끊기면 호가가 비거나 오래될 수 있습니다. 그때는 상단 배너로 안내하고, 가능하면 직전 값을 잠깐 유지해 빈 화면만 보이지 않게 합니다. |
한눈에
‘이 가격이면 사겠다/팔겠다’고 미리 걸어 두는 주문입니다(지정가). 시장가(지금 당장 시장 가격으로)나 스왑은 아직 없습니다. 보내기 전에 반드시 지갑 승인이 한 번 더 있습니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
% = 내 실잔고(예치+지갑). 가격 ± 시 같은 %로 Size 재계산. 직접 입력 시 수량 고정.
6confirming → MetaMask → submitted
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 매수 / 매도 고르기 | 한 칸이 좌우로 나뉩니다. 왼쪽은 매도(빨강·아래쪽 화살표), 오른쪽은 매수(초록·위쪽 화살표)입니다. 고른 쪽만 배경이 더 진하게 칠해져, 지금 어떤 방향인지 바로 보입니다. 글자 아래 %는 ‘시장에서 매수/매도 비중’이 아니라, 아래 수량 슬라이더와 같은 ‘내 가용 잔고의 몇 %로 주문할지’입니다. 매수 %와 매도 %는 따로 기억됩니다. 보내기 버튼 글자도 Limit Buy / Limit Sell로 맞춰집니다. |
| 2 | 가격 입력 | 숫자를 직접 치거나 ±로 한 칸(1틱)씩 조절할 수 있습니다. ‘매수호가 / 중간가 / 매도호가’ 버튼으로 호가창의 대표 가격을 빠르게 넣을 수도 있습니다. 실시간 현재가가 입력칸을 제멋대로 덮어쓰지는 않습니다. |
| 3 | 매수호가 · 중간가 · 매도호가란? | 「매수호가(Bid)」= 지금 사겠다고 올려 둔 가격 중 가장 높은 값. 「매도호가(Ask)」= 팔겠다고 올려 둔 가격 중 가장 낮은 값. 「중간가(Mid)」= 그 둘의 가운데 시세. 버튼을 누르면 주문 가격 칸에만 들어가고, 이후 호가가 움직여도 입력칸을 자동으로 바꾸지 않습니다. 호가 데이터가 아직 없으면 중간가 기준으로 아주 작은 간격(1틱)을 아래·위에 두어 세 값이 서로 다르게 보이게 합니다. |
| 4 | 수량 | 수량을 직접 입력하거나, % 슬라이더·수량 ±로 조절합니다. 페어를 바꾸면 가격·양쪽 수량은 초기화됩니다. 0보다 커야 주문을 넣을 수 있습니다. |
| 5 | 가격을 바꿀 때 수량이 같이 바뀌는 경우 | 처음에는 % 모드(예: 25%)입니다. 매수 100%는 ‘지갑(및 거래소에 이미 들어가 있는 분)에 있는 견적 자산(예: USDC)으로 살 수 있는 최대 수량’, 매도 100%는 ‘같은 기준으로 본 기초 자산(예: SOL) 전량’에 가깝습니다. 가격을 바꾸면 같은 %를 유지하려고 수량이 다시 계산될 수 있습니다. |
| 6 | 수량이 안 바뀌는 경우 | Size를 직접 타이핑하면 ‘직접 입력 모드’로 바뀝니다. 이후 가격을 바꿔도 수량은 고정되고, % 표시만 맞춰집니다. 다시 % 슬라이더를 움직이면 % 모드로 돌아갑니다. |
| 7 | 주문 보내기 | 보내기를 누르면 Phantom 승인 창이 뜹니다. 승인하면 주문이 체인에 제출됩니다. ‘접수됐다’는 것은 블록체인에 기록됐다는 뜻이고, 호가창 맨 위에 당장 내 주문이 보인다는 뜻은 아닐 수 있습니다. 제출 중에는 버튼을 다시 누르지 못하게 막습니다. |
| 8 | 잔고·수수료 안내 | 체인 수수료(가스)에는 소량의 SOL이 필요합니다. 화면에는 따로 ‘예치하기’ 버튼이 없습니다. 주문 가능 수량은 주로 지갑에 있는 잔고를 기준으로 잡고, 주문을 보낼 때 지갑 승인 한 번에 ‘필요하면 거래소로 옮기는 처리 + 주문’이 같이 들어갈 수 있습니다. 지갑에 쓸 자산·가스용 SOL이 부족하면 주문이 실패할 수 있습니다. |
한눈에
내 자산이 어디에 있는지를 나눠 보여 줍니다. 지금은 사용자가 누르는 ‘예치’ 버튼은 없고(입출금 UI는 숨김), 표의 ‘거래소’ 칸은 체인 안 거래소 쪽 잔고를 참고용으로 보여 주는 값에 가깝습니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| Asset | Wallet | Exchange | Orders |
|---|---|---|---|
| wSOL | 0.0049 | 0.00 | 0.00 |
| USDC | 12.40 | 5.00 | 1.20 |
| DOGEK | 1000 | 0.00 | 0.00 |
prepare API는 있음 · Sell은 deposit+place IX로 보완 가능
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 표에 나오는 열 | 자산마다 지갑 잔고, 거래소 쪽 잔고, 미체결에 묶인 수량을 볼 수 있습니다. ‘거래소 쪽’은 예전에 주문 과정에서 들어가 있거나 남아 있는 분일 수 있고, 사용자가 따로 예치 메뉴를 쓴 결과는 아닙니다(그 메뉴는 아직 숨김). |
| 2 | 언제 채워지나 | 지갑을 연결한 뒤에 조회됩니다. 새로고침할 수 있고, 불러오는 중·오류 안내는 표 근처에 나옵니다. |
| 3 | 입출금 버튼 | Wrap / Deposit / Withdraw 같은 버튼은 준비 중이라 화면에서는 숨겨 두었습니다. 나중에 켤 수 있습니다. 지금은 ‘예치’를 사용자가 따로 할 필요가 없고, 주문 승인에 필요할 때 자동으로 붙는 방식입니다. |
| 4 | 주문에 필요한 잔고 | 매수에는 견적 자산(예: USDC), 매도에는 기초 자산(예: SOL)이 지갑(또는 이미 거래소 쪽에 있는 분)에 있어야 합니다. 가스용 SOL도 필요합니다. 부족하면 주문이 실패할 수 있습니다. |
한눈에
아직 상대와 만나지 않아 대기 중인 내 지정가 주문 목록입니다. 체결이 끝나면 여기서 사라지고, 내 체결 내역 쪽에 흔적이 남을 수 있습니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| ☐ | Side | Type | Price | Qty | |
|---|---|---|---|---|---|
| ☑ | Sell | LIMIT | 150.0000 | 0.001000 | Cancel |
| ☐ | Buy | LIMIT | 130.0000 | 0.050000 | Cancel |
status: confirming → MetaMask → submitted
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 무엇을 보나 | 매수/매도 구분, 지정가, 가격, 수량, (일부) 체결된 양 등을 표로 봅니다. 탭 이름 옆에 건수가 표시되기도 합니다. |
| 2 | 여러 건 선택 | 체크박스로 여러 줄을 고른 뒤, 선택 취소 등으로 한꺼번에 처리할 수 있습니다. |
| 3 | 일괄·단건 취소 | 매수만 / 매도만 / 전체 / 선택 취소, 또는 각 줄의 Cancel이 있습니다. 취소할 때마다 지갑 승인이 필요합니다. 처리 중에는 버튼이 잠시 막힙니다. |
| 4 | 상태 안내 | 승인 대기 · 제출됨 · 오류 메시지가 목록 근처에 표시됩니다. |
한눈에
내가 실제로 사고판(체결된) 기록만 모읍니다. 아직 대기 중인 주문은 미체결에, 시장 전체의 방금 체결은 호가창의 체결 탭에 있습니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| Time | Side | Price | Size | Trader |
|---|---|---|---|---|
| 20:41:02 | Buy | 133.10 | 0.40 | You |
| 20:40:18 | Sell | 133.40 | 1.20 | …abc |
DOGEK 과거 구간은 Mongo fills 시드(m3) 범위에 의존
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 목록에 보이는 것 | 시간 · 매수/매도 · 가격 · 수량 등이 보입니다. 매수는 초록, 매도는 빨강으로 구분합니다. |
| 2 | 비어 보일 때 | 아직 거래가 없거나, 네트워크·데이터 준비 범위 때문에 목록이 비거나 늦게 채워질 수 있습니다. 지갑을 연결했는지 먼저 확인해 주세요. |
| 3 | 더 보기 | 기록이 많으면 ‘더 보기’로 조금씩 이어 불러올 수 있습니다. |
한눈에
현재가·지갑·미체결 수·최근 거래량·추정 손익을 카드로 한눈에 보는 요약입니다. 세무·회계용 확정 손익이 아닙니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 카드 의미 | Mark Price는 현재 시세, Wallet은 지갑 쪽 요약, Open Orders는 미체결 건수, Est. PnL은 최근 체결과 현재가를 참고한 추정 손익입니다. |
| 2 | 손익 안내 | 정확한 장부 손익이 아니라 참고용입니다. 투자 판단의 유일한 근거로 쓰지 마세요. |
| 3 | 지갑 미연결 | 지갑을 연결하지 않으면 일부 칸은 — 로 비어 있습니다. |
한눈에
화면 너비가 아주 좁을 때(대략 휴대폰, 가로 약 720픽셀 이하) 쓰는 배치입니다. 할 수 있는 일(주문·취소·마켓 선택)은 PC와 같고, 칸만 세로로 쌓입니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 언제 바뀌나 | 브라우저 창이 좁아지면 자동으로 모바일 배치로 바뀝니다. 지갑 연결·주문 상태는 PC에서 하던 것과 그대로 이어집니다. (개발자 도구로 창만 줄인 것과 실제 폰 브라우저 배율이 달라 보일 수 있습니다.) |
| 2 | 위에서 아래로 | 브랜드·Online·지갑 → 페어와 현재가 → 주문 → 호가/체결 → 하단 탭(미체결·내 체결·성과) 순으로 쌓입니다. 차트는 기본으로 전체를 차지하지 않고, ‘차트 열기’ 트레이/시트로 크게 펼칠 수 있습니다. |
| 3 | 차트 시트 | 차트를 열면 아래에서 올라오는 시트에 큰 차트가 나옵니다. 시간 간격 버튼은 한 줄로 유지해 글자가 깨지지 않게 합니다. 닫으면 주문 화면으로 돌아갑니다. |
| 4 | 매수·매도·주문 | PC와 같은 매도(왼)·매수(오) 토글과 % 표시, 지정가 입력, 보내기 버튼입니다. 입출금 버튼은 PC와 같이 아직 숨김입니다. |
한눈에
접이식·태블릿처럼 중간 너비(대략 721~1100픽셀)에서는 ‘모바일 전용 셸’이 아니라 PC와 같은 기능을 쓰되, 세로로 더 읽기 쉽게 쌓습니다.
화면 미리보기 · 밝은 화면 · 민트 포인트 / 매수 초록 · 매도 빨강
| 번호 | 어디·무엇 | 쉽게 읽기 |
|---|---|---|
| 1 | 배치 순서 | 위에서 아래로 차트 → 주문 칸 → 호가(가로로 꽉 채운 매도/매수 2단) → 미체결·기타 탭 순서입니다. 좁은 폰처럼 차트를 시트에만 가두지 않고, PC에 가까운 정보량을 유지합니다. |
| 2 | 호가 2단 | 호가는 화면 가로를 거의 다 쓰며, 매도와 매수가 위·아래로 나뉜 2단으로 보입니다. 손가락으로 스크롤하기 쉽게 한 칸에 모읍니다. |
| 3 | 할 수 있는 일 | 마켓 검색, 지갑, 지정가 주문, 미체결 취소 등 기능은 PC·모바일과 동일합니다. ‘어디에 무엇이 붙느냐’만 다릅니다. |