⑦ 토스 웹사이트 구조 및 OPEN API 분석하기
[코드스테이츠 PMB 18기] W7 Weekly
목차
1. 토스 웹사이트의 랜딩 페이지 분석 및 정리
- HTML, CSS, JavaScript 구조, 스타일, 동작을 이해하고 분석해서 정리하기
2. 토스 서비스 유형별 장단점 분석 및 확장 아이디어 구상
- 웹(토스)
3. Open API 탐색, 제공하는 기능과 구조 이해 및 정리
- 금융결제원 오픈 API_잔액조회
1. 토스 웹사이트의 랜딩 페이지 분석 및 정리
먼저 크롬 브라우저에서 단축키 'F12'를 누르면 토스 랜딩 페이지의 개발자 도구를 확인할 수 있다.
1. Elements
개발자 도구에 진입하면 처음으로 확인할 수 있는 것은 엘리먼트 패널이다. 여기서는 토스 랜딩 페이지의 HTML 구조를 확인할 수 있다.
토스 랜딩페이지의 엘리먼트 패널을 분석했을 때 크게 아래와 같이 구성되어 있다.
<head> 영역에는 페이지 제목, 메타 태그, 스타일 시트 및 자바스크립트 코드와 같은 전체 페이지에 대한 정보가 포함되어 있다.
<body> 영역에는 사용자에게 표시되는 모든 콘텐츠 요소가 포함되어 있다. 여기에는 텍스트, 이미지, 링크, 버튼, 폼, 기타 웹 요소들이 있다.
<nav> 웹 페이지의 탐색 부분을 나타내는 요소이다. 토스 랜딩페이지의 상단 로고 및 탐색 메뉴 영역으로 여기에는 링크가 포함되어 사용자가 페이지의 다른 부분으로 이동할 수 있다.
<main> 주요 콘텐츠 영역을 정의하는 요소이다.
토스에 대한 정보를 확인할 수 있는 영역으로 토스의 주요 콘텐츠, 글, 이미지, 동영상, 버튼 등이 포함된다.
<footer> 웹 페이지의 맨 아래에 위치하는 요소로, 여기에는 저작권 정보, 연락처 정보 및 기타 토스에 대한 정보가 포함되어 있다.
2. 검사 도구
검사도구는 웹페이지를 구성하는 Elements를 쉽게 찾을 수 있도록 도와주는 도구이다. 실행 방법은 버튼을 클릭하고, 파란색으로 활성화된 것을 확인한 다음 페이지뷰에서 원하는 엘리먼츠를 선택하면 된다.
3. styles
'Styles' 패널에서는 토스 랜딩페이지에 적용된 전체 css 클래스를 확인할 수 있다.
CSS 클래스는 HTML 요소에 스타일을 적용하기 위해 사용되는 식별자이다. 클래스는 동일한 스타일을 여러 요소에 적용하거나 특정 요소에만 스타일을 적용하는 데 사용된다. 클래스는 HTML 요소의 class 속성을 통해 지정되며, 스타일 시트에서 해당 클래스를 선택하여 스타일을 적용할 수 있다.
또한 각각의 HTML 요소에 적용된 css 스타일을 확인하고, 수정해 볼 수 있는 기능을 제공한다. 토스에서도 HTML의 class 속성을 통해 CSS스타일이 적용되는 것을 확인할 수 있었다.
4. Computed
Computed 탭을 통해 선택한 HTML 요소에 적용된 CSS 스타일을 이해할 수 있다.
스타일의 이름, 속성 및 값을 볼 수 있고, 스타일의 우선순위를 확인하여 스타일이 부모 요소 또는 기타 스타일에서 상속되었는지 확인할 수도 있다.
5. event listeners
이벤트 리스너 탭에서는 웹 페이지의 특정 요소에 연결된 이벤트(자바스크립트)를 볼 수 있다.
토스 랜딩페이지에서 특정 요소를 클릭하면 이벤트 리스너 탭에 해당 요소에 연결된 이벤트 목록이 표시된다. 목록에서 해당 이벤트를 클릭하면 이벤트를 호출하는 함수의 코드가 Sources(디버거) 창에 표시된다.
토스의 웹사이트 랜딩페이지는 헤더, 바디, 메인, 푸터로 이루어져 있으며, 각 영역은 div 태그로 묶여 있다. 헤더 영역에는 전체 페이지에 대한 정보가 포함되어 있고, 바디에는 토스의 로고와 상단 메뉴 버튼이, 메인 영역에는 토스의 주요 서비스와 특징이, 푸터 영역에는 회사 소개, 연락처, 이용약관 등의 정보가 표시되어 있다.
또한 CSS 스타일은 매우 깔끔하고 간결하다. 기본적인 색상과 글꼴을 사용하고, 최소한의 스타일만 적용하여 시각적 과잉을 피하고 있다. 로고와 토스 앱 다운로드 버튼은 강조색을 사용하여 눈에 잘 띄도록 하였고, 메인 영역은 카드 형식으로 구성하여 정보의 가독성을 높였다.
2. 토스 서비스 유형별 장단점 분석 및 확장 아이디어 구상
토스는 웹과 앱을 통해 금융 서비스를 제공하고 있다. 웹사이트에서는 토스 앱을 다운로드하고, 토스 서비스에 대한 정보를 얻을 수 있다. 그리고 앱을 통해 송금, 결제, 투자, 보험 등 다양한 금융 서비스를 간편하게 이용할 수 있다.
여기서 토스의 웹사이트는 반응형으로 제작되어 랜딩페이지가 다양한 장치의 화면 크기에 맞게 조정된다. 즉, 웹 사이트는 데스크톱 컴퓨터, 노트북, 태블릿 및 스마트폰에서 모두 동일하게 보인다.
전반적으로 반응형 웹사이트는 모든 장치에서 동일하게 보이는 웹사이트를 만드는 좋은 방법이다. 그러나 반응형 웹에는 몇 가지 단점이 있다.
장점
사용자 경험 향상 : 반응형 웹사이트는 모든 장치에서 동일하게 보이며 탐색하기 쉽다.
유지 보수 비용 절감: 반응형 웹사이트는 데스크톱용 버전과 모바일용 버전을 별도로 유지 관리할 필요가 없으므로 비용을 절감할 수 있다.
검색 엔진 최적화(SEO) 향상: 반응형 웹사이트는 모바일 장치에서 더 잘 인식되므로 검색 엔진 결과 페이지(SERP)에서 더 높은 순위를 차지할 수 있다.
단점
복잡한 레이아웃: 반응형 웹사이트는 복잡한 레이아웃을 갖는 데 더 어려울 수 있으며 특정 장치에서 잘 보이지 않을 수 있다.
로딩 시간 증가: 반응형 웹사이트는 데스크톱용 웹사이트보다 로딩 시간이 더 길 수 있다.
비용: 반응형 웹사이트를 만드는 것은 데스크톱용 웹사이트를 만드는 것보다 비쌀 수 있다.
이러한 단점들을 봤을 때 토스의 반응형 웹사이트는 레이아웃이 간단하고 명확하며 기능은 쉽게 찾을 수 있다. 또한 웹사이트의 기능은 사용자 친화적으로 설계되어 사용하기 쉽다. 전반적으로 토스의 웹사이트는 단순하면서도 세련되어 있어 반응형 웹에 최적화되있는 것으로 보인다.
그리고 토스의 앱은 하이브리드 앱으로 개발되었다.
하이브리드앱은 다음과 같은 이점을 가지고 있다.
플랫폼 호환성 : 하이브리드 앱은 여러 플랫폼에서 동일한 코드를 사용하여 실행할 수 있다. 토스는 안드로이드와 iOS 플랫폼에서 모두 이용 가능한 앱을 제공하기 위해 하이브리드 앱을 선택했다. 이렇게 하면 개발 및 유지보수 비용을 줄일 수 있으며, 사용자들이 다양한 기기에서 일관된 경험을 얻을 수 있다.
유지 관리 및 업데이트 비용 절감 : 하이브리드 앱은 네이티브 앱보다 유지 관리 및 업데이트 비용이 저렴하다. 이는 하이브리드 앱이 웹 기술을 기반으로 하기 때문에 네이티브 앱보다 더 쉽게 유지 관리하고 업데이트할 수 있기 때문이다.
개발 및 배포 속도 향상 : 하이브리드 앱은 네이티브 앱보다 개발 및 배포 속도가 빠르기 때문에 더 빠르게 새로운 기능을 출시하고, 업데이트할 수 있다. 이는 하이브리드 앱이 웹 기술을 기반으로 하기 때문에 네이티브 앱보다 더 쉽게 개발하고 배포할 수 있기 때문아다.
사용자 경험 개선 : 하이브리드 앱은 네이티브 앱과 웹 앱의 장점을 조합할 수 있다. 토스는 네이티브 앱의 성능과 기능을 유지하면서도 웹 기술을 활용하여 사용자 경험을 향상했다.
다양한 기능과 서비스 제공 : 토스는 다양한 금융 서비스와 기능을 제공하기 때문에 하이브리드 앱은 이러한 다양성을 효율적으로 관리하고 제공할 수 있다. 토스의 하이브리드 앱은 여러 서비스와 연동하여 편리한 금융 서비스를 제공하고, 개인화된 사용자 경험을 제공할 수 있다.
전반적으로 하이브리드 앱은 개발 비용과 시간, 플랫폼 간 호환성이 중요한 앱에 적합하다. 그러나 성능, 보안이 중요한 앱의 경우 네이티브 앱이 더 나은 선택일 수 있다.
이에 Toss는 하이브리드 앱으로 서비스를 제공함에도 불구하고 고객들의 개인 정보와 자금에 대한 보안을 유지하기 위해 다양한 보안 접근 방식을 채택하고 있다.
- 365일 24시간 내내, 사용자들의 패턴을 실시간으로 분석하고 이상 패턴을 먼저 감지하는 전담 인원인 '모니터링 에이전트'를 운영하고 있다.
- 이상 금융 거래를 감지하는 FDS(Fraud Detection System) 기술을 자체적으로 개발하고 운영, 다양한 사고에 대한 빠른 대응과 기술 적용 시간을 획기적으로 줄여 보안 기술을 더욱 정교하게 발전시키고 있다.
3. Open API 탐색, 제공하는 기능과 구조 이해 및 정리
금융결제원 오픈 API_잔액조회
잔액조회 OPEN API
잔액조회 API는 금융결제원 오픈 API를 통해 제공되는 기능 중 하나로, 사용자가 등록한 계좌 잔액과 관련된 정보를 조회하는 역할을 한다. 이 API는 HTTP GET 메서드를 사용하여 호출된다.
금융결제원 오픈 API
https://openapi.kftc.or.kr/openapi/openbanking/balanceInquiry
금융결제원 오픈 API(개발자 사이트)_오픈 API_잔액조회
https://developers.kftc.or.kr/dev/openapi/open-banking/balance
사용자는 이용기관이 제공하는 서비스를 통해 본인계좌에 대한 잔액 및 출금가능 금액을 조회할 수 있다.
이용기관은 "잔액조회 API"를 이용하여 사용자가 등록한 계좌의 잔액을 조회하여 사용자에게 제공할 수 있다.
처리방식
이용기관은 사용자의 계좌등록 및 계좌등록확인 과정에서 획득한 핀테크 이용번호와 Access Token를 사용하여 API를 호출한다.
입출력 구조
잔액조회 API의 입력은 핀테크이용번호, Access Token이다. 핀테크이용번호는 사용자의 계좌등록 및 계좌등록확인 과정에서 획득할 수 있으며, Access Token은 Open Banking 인증서 발급 과정에서 획득할 수 있다. 잔액조회 API의 출력은 잔액과 통화이다. 잔액은 계좌의 잔액을 나타내는 숫자이며, 통화는 계좌의 통화를 나타내는 문자열이다.
입력
API 요청 메서드: 잔액 조회를 위한 HTTP 요청 메서드(GET 등)를 지정한다.
API 엔드포인트: 잔액 조회를 위한 API의 주소를 지정한다.
인증 및 권한 정보: API를 사용하기 위한 인증 토큰 또는 API 키 등의 인증 정보를 제공한다.
요청 데이터: 잔액 조회를 위해 필요한 계좌번호 등의 데이터를 요청에 포함한다.
출력
응답 상태 코드: 요청의 처리 상태를 나타내는 HTTP 상태 코드를 반환한다.
응답 데이터: 요청에 대한 처리 결과로써, 해당 계좌의 잔액 정보를 포함한 데이터를 반환한다.
이러한 구조를 통해 고객은 자신의 계좌의 잔액을 안전하게 조회할 수 있으며, 금융 기관은 금융결제원을 통해 신뢰성 있는 잔액 정보를 제공할 수 있다.
잔액조회 API는 GET 메서드로 호출되며, 상세 스펙 및 호출 예제는 아래와 같다.
요청메시지 URL
요청 메시지 명세
응답 메시지 명세
응답 메시지 형태
api_tran_id: API 거래고유번호api_tran_dtm: API 거래일시
rsp_code: API 응답코드
rsp_message: API 응답메시지bank_tran_id: 참가기관 거래고유번호bank_tran_date: 참가기관 거래일자bank_code_tran: 응답코드를 부여한 참가기관 표준코드
bank_rsp_code: 참가기관 응답코드bank_rsp_message: 참가기관 응답메시지bank_name: 개설기관명savings_bank_name: 개별저축은행명fintech_use_num: 핀테크이용번호balance_amt: 계좌잔액
available_amt: 출금가능금액account_type: 계좌종류
product_name: 상품명account_issue_date: 계좌개설일
maturity_date: 만기일
last_tran_date: 최종거래일
각 항목에 대한 설명
api_tran_id: API 거래고유번호로, API 호출 시 생성된 고유번호
api_tran_dtm: API 거래일시로, API 호출 시각을 나타내는 날짜와 시간
rsp_code: API 응답코드로, API 호출 결과에 대한 응답코드
rsp_message: API 응답메시지로, API 호출 결과에 대한 응답메시지
bank_tran_id: 참가기관 거래고유번호로, 은행에서 생성된 고유번호
bank_tran_date: 참가기관 거래일자로, 은행에서 거래를 처리한 날짜
bank_code_tran: 응답코드를 부여한 참가기관 표준코드로, 은행을 나타내는 표준코드
bank_rsp_code: 참가기관 응답코드로, 은행에서 처리한 결과에 대한 응답코드
bank_rsp_message: 참가기관 응답메시지로, 은행에서 처리한 결과에 대한 응답메시지
bank_name: 개설기관명으로, 은행명
savings_bank_name: 개별저축은행명으로, 은행의 개별 저축은행명
fintech_use_num: 핀테크이용번호로, 핀테크 기업을 나타내는 고유번호
balance_amt: 계좌잔액
available_amt: 출금가능금액
account_type: 계좌종류
product_name: 상품명
account_issue_date: 계좌개설일로, 계좌가 개설된 날짜
maturity_date: 만기일로, 계좌의 만기일
last_tran_date: 최종거래일로, 계좌의 최종거래일
