01
HTML5 웹표준 기반
시맨틱 HTML, ARIA, 키보드 내비게이션, 스크린리더 친화적 마크업이 컴포넌트 수준에서 기본값으로 구현되어 있습니다. 접근성 WCAG AA 대응이 추가 작업이 아닙니다.
TOOL · 03
SML
HTML5 웹표준 WTS 개발을 위한 NCG 자체 프레임워크. 삼성증권·미래에셋증권 프로젝트에서 사용되었으며, 접근성 AA와 Core Web Vitals 통과를 기본 조건으로 설계되었습니다.
01Overview
증권 WTS·금융 웹사이트의 개발은 일반 웹 개발과 다릅니다. 실시간 데이터·복잡한 폼·규제 고지·접근성 요구가 한 화면에 동시에 존재합니다. SML은 NCG가 19년간의 금융 웹 개발 경험을 누적해 만든 내부 프레임워크이며, 이런 요구들을 기본값으로 충족하도록 설계되었습니다.
단순한 UI 컴포넌트 라이브러리가 아니라, 상태관리·국제화·접근성·성능 측정이 모두 내재되어 있는 개발 플랫폼입니다. 프로젝트 팀은 금융 도메인 로직에 집중하고, 공통의 기술 요구사항은 프레임워크가 담당합니다.
02Features
Capabilities that matter.
02
실시간 데이터 패턴
주가·호가·체결 같은 고빈도 실시간 데이터의 렌더링 최적화 패턴이 내장되어 있습니다. 메모리·프레임 드랍·배터리 영향을 측정·관리하는 도구도 함께 제공합니다.
03
Core Web Vitals 빌트인
LCP·INP·CLS 같은 주요 지표를 프레임워크 레벨에서 자동 측정하고, 기준치 미달 시 빌드 경고를 발생시킵니다. 성능은 선택이 아니라 통과 조건입니다.
04
금융 폼 컴포넌트
금액 입력·계좌번호·계약서 동의·본인인증 같은 금융 공통 폼 패턴을 표준 컴포넌트로 제공합니다. 접근성·유효성·에러 복구가 일관되게 동작합니다.
05
국제화·다채널 대응
한국어·영어·중국어의 타이포·띄어쓰기·숫자 포맷 차이를 반영했고, Web·PC·Mobile 환경을 같은 코드베이스에서 지원합니다.
03Use case
삼성증권 Samsung POP Web 채널은 SML을 기반으로 구축되었습니다. 기본 탑재된 접근성·성능 계측 덕분에 프로젝트 초기부터 WCAG AA와 Core Web Vitals를 꾸준히 충족시켰고, 런칭 후에도 추가 성능 개선 작업이 거의 필요하지 않았습니다. 미래에셋증권의 WTS 또한 SML 기반으로 개발되었으며, 두 증권사 모두 Web 채널의 안정성 지표가 업계 상위권을 유지하고 있습니다.
WCAG AA
접근성
CWV Pass
성능
삼성·미래에셋
적용 사례