WEB STANDARD
UI/UX FRAMEWORK BY TEAMMOCA
DESIGNED TO WORK.

moca®

FROM A SKETCH, TO A SYSTEM.

좋은 업무 화면은
한 장의 스케치에서.

손끝의 아이디어가 실제 업무 화면이 되는 순간.
MOCA와 함께 웹표준으로 시작하세요.

데모 살펴보기 ↗ MOCA 알아보기 ↓

흰 책상 위에서 업무 화면을 손으로 스케치하는 장면 — 01 — THE BEGINNING 아이디어를 그리는 일에서부터.

01 / WHY MOCA

표준 위에 세우는,
더 나은 업무 경험.

MOCA는 표준 HTML·CSS·JavaScript 위에서 동작하는 프론트엔드 UI/UX 프레임워크입니다.
복잡한 업무 화면을 빠르고 안정적으로 운영하도록 고성능 SPA 구조를 기본으로 제공합니다.

Grid·Tree·Form 등 업무용 컴포넌트와 반응형 화면 구조를 기본 제공하며, XML 변환이나 특정 서버 기술에 종속되지 않습니다.
가볍게 도입하고 오래 관리할 수 있도록 설계했습니다.

02 / BUILT FOR WORK

업무에 필요한 것들,
하나의 프레임워크 안에.

01업무 UI 컴포넌트

Grid·Tree·Form 등 업무 화면의 기본 구성

02SPA 작업공간

탭과 화면분할로 여러 업무를 동시에 처리

03반응형 레이아웃

PC와 모바일에 맞춰 화면 구조를 자동 배치

04업무 공통 기능

팝업·파일·달력·차트까지 프레임워크에 기본 내장

03 / PHILOSOPHY

MOCA 10대 철학

업무 시스템을 만들며 반복해서 겪은 일들과, 그때마다 내린 결론입니다.

01 / 10

Presets, Templates

자주 쓰는 조각을 팔레트에서 끌어다 씁니다

MOCA 는MOCA 는 자주 쓰는 조각을 프리셋으로 둡니다. 프리셋은 HTML 파일 하나라, 프로젝트가 자기 조각을 더하면 그대로 사용자 정의형 컴포넌트가 되어 팔레트에 나타나고 끌어다 놓아 씁니다. 새 화면은 템플릿으로 표준 골격부터 시작합니다. 원본이 파일 하나이므로 고치면 다음에 넣는 화면부터 바로 반영됩니다.

왜 이렇게 만들었나 · 배경과 문제

배경업무 화면은 비슷한 조각의 반복입니다. 조회조건 폼, 목록 그리드, 타이틀바처럼 화면마다 거의 같은 덩어리가 들어가고, 그 모양은 프로젝트마다 조금씩 다릅니다.

그래서 생기는 문제그래서 개발자는 다른 화면을 열어 복사해 옵니다. 복사한 조각에는 그 화면만의 사정까지 딸려 오고, 공통 모양을 바꾸면 복사된 곳을 하나하나 찾아 고쳐야 합니다. 이를 막으려 사용자 정의 컴포넌트를 만들면 이번에는 만드는 법부터 새로 배워야 합니다.

02 / 10

모바일 친화형

가벼운 엔진, 화면 폭에 맞는 레이아웃

MOCA 는MOCA 는 모바일 사용성에 특히 공을 들였습니다. 리팩토링을 상시로 수행해 코어를 최소로 두고 기능은 필요한 순간에만 꽂아 쓰므로 작은 용량·최소 파일로 첫 로딩이 가볍고 도입·배포도 간단합니다. 레이아웃 컴포넌트로는 개발자가 반응형 화면을 직접 그립니다. 같은 화면을 여는 데 브라우저가 처음 받는 엔진 파일을 재어 보면 이렇습니다.

초기 엔진 로딩 실측 — 첫 방문(캐시 없음) · gzip 전송 기준

타 엔진879KB

MOCA56KB

압축 전으로는 4.1MB 대 277KB — 약 15배 차이입니다. 나머지 컴포넌트는 그 화면이 실제로 쓸 때 실립니다.

왜 이렇게 만들었나 · 배경과 문제

배경업무 엔진은 태생이 PC 입니다. 오래된 엔진에는 브라우저별 분기, 옮겨 온 기능, 사이트마다 다른 요구가 한 몸에 쌓여 무거워지고, 화면은 관례처럼 절대좌표로 그려 왔습니다.

그래서 생기는 문제모바일에서는 이 둘이 한꺼번에 드러납니다. 느린 망에서 큰 엔진을 받느라 첫 화면이 늦고, 반응형 요건이 나오면 화면 작업이 CSS 로 옮겨 가 대부분의 개발자는 단적으로 못 그립니다. 그래서 퍼블리셔가 매번 손으로 만들게 됩니다.

03 / 10

PHP, ASP.NET, JSP

프론트엔드만 제공하므로 어디에나 들어갑니다

MOCA 는MOCA 는 프론트엔드 안에서 깔끔하게 끝냅니다. 연동할 서버 모듈은 그 프로젝트 개발팀이 자기 언어로 만듭니다. 그래서 JSP·PHP·ASP.NET·Node 어느 서버든 JSON 요청·응답 약속만 맞으면 들어가고, 설치는 MOCA 폴더를 웹서버에 복사하면 끝입니다.

왜 이렇게 만들었나 · 배경과 문제

배경많은 제품이 라이선스 검사와 서버 모듈 일부를 담아야 해서 서블릿 방식을 씁니다. 화면 제품인데 서버 안에 자기 조각을 두는 것입니다.

그래서 생기는 문제그 순간 라이브러리 충돌이 시작되고, 기존 프레임워크의 제어를 받지 않아 상호 호출 구조를 고민하게 됩니다. 화면이라는 역할을 인정받지 못해 생기는 현장 다툼도 여기서 옵니다. 자바에 묶여 PHP·.NET 에서는 아예 쓰지 못하고, 배포는 웹서버 담당과 WAS 담당으로 나뉘어 현장마다 다른 스트레스를 만듭니다.

04 / 10

다양한 개발툴

어떤 개발 환경에서도 같은 방식으로

MOCA 는MOCA 는 세 가지 개발툴을 함께 드립니다. 이클립스 플러그인(MOCA IntelliSense for Eclipse · 전자정부표준프레임워크 포함), VS Code 확장(MOCA IntelliSense · VSCodium 포함), 설치 없이 브라우저에서 여는 MOCA Web Studio 입니다. 셋 모두 같은 컴포넌트 규격을 읽어 자동완성·화면 골격·새 화면 템플릿·디자인뷰를 똑같이 제공하므로, 어떤 개발 환경에서든 같은 방식으로 화면을 만듭니다. 셋 다 꼭 필요한 기능만 가볍게 담아, 켜 두는 것이 부담이 되지 않습니다. 설치가 막히거나 인터넷이 없는 PC 라면 MOCA Portable 을 씁니다. 압축만 풀면 무설치 편집기와 IntelliSense, 실행 런타임, 샘플 프로젝트가 한 폴더에서 바로 열립니다.

왜 이렇게 만들었나 · 배경과 문제

배경업무 화면 개발 도구는 대개 한 가지 편집기에 묶여 나옵니다. 그런데 현장마다 쓰는 환경이 다릅니다. 이클립스로 개발하는 곳, VS Code 로 개발하는 곳이 있고, 프로그램 설치 자체가 막힌 PC 도 있습니다.

그래서 생기는 문제도구가 편집기 하나에만 맞춰져 있으면 그 편집기를 쓰지 않는 팀은 도움 없이 개발합니다. 같은 프로젝트 안에서도 사람마다 코딩 방식이 갈라지고, 인력이 옮겨 갈 때마다 도구부터 다시 익힙니다.

05 / 10

MOCA React

MOCA 는MOCA 는 React 철학 안으로 손을 내밉니다. 별도 제품인 MOCA React 가 패키지 11종으로 그 자리를 채웁니다. 필요한 것만 설치하고, 쓰지 않는 것은 번들에 들어가지 않습니다.

왜 이렇게 만들었나 · 배경과 문제

배경React 는 별도의 세계입니다. 그리고 React 의 약점은 완성형 업무 컴포넌트가 없다는 것입니다. 그리드 하나를 쓰려 해도 사서 쓰거나 오픈소스를 찾아 모아야 합니다.

그래서 생기는 문제컴포넌트를 여기저기서 모으면 모양과 조작 방식이 제각각이고, 문제가 생겼을 때 물어볼 곳도 각각입니다.

06 / 10

Source = Runtime

MOCA 는XML 변환도, 전용 런타임도 필요 없습니다. 표준 HTML·CSS·JavaScript 를 브라우저가 그대로 실행합니다. MOCA 는 과감하게 소스가 곧 런타임이면서도 SPA 를 실현했습니다. 성능을 지키고 웹표준에 훨씬 가까워 개발자의 이질감이 최소화되며, 중간 변환이 없어 형상관리와 배포에 추가 비용이 생기지 않습니다.

왜 이렇게 만들었나 · 배경과 문제

배경SPA 에서 화면끼리 변수가 섞이는 문제(스코프)를 풀기 위해, 많은 제품이 XML 자체 문법으로 1차 코딩을 하고, 이를 표준 JS 로 2차 변환한 뒤, 3차로 화면을 그립니다.

그래서 생기는 문제그러면 개발자가 쓴 소스와 실제로 도는 결과가 달라, 배포할 때마다 변환이 따릅니다. 변환을 실시간으로 하면 그만큼 성능을 잃습니다. 형상관리에도 소스와 중간 산출물이 함께 남습니다.

07 / 10

DATASET or NO DATASET

데이터를 정의해도, 정의 없이 그대로 붙여도 됩니다

MOCA 는MOCA 는 서버가 준 실제 데이터를 컴포넌트에 바로 붙입니다(NO DATASET). 자주 바뀌는 업무일수록 줄어드는 시간이 큽니다. 데이터셋 방식에 익숙하거나 도메인을 명확히 정의해 쓰는 팀을 위해 데이터셋 컴포넌트도 함께 제공합니다(DATASET). 그리드·폼·콤보에 붙이면 같은 데이터를 함께 봅니다. 팀의 방식에 맞춰 고르면 됩니다.

왜 이렇게 만들었나 · 배경과 문제

배경데이터셋·데이터리스트·데이터맵처럼 데이터를 먼저 정의하고 화면에 연결하는 방식이 오래 쓰였습니다.

그래서 생기는 문제업무 시스템의 조회 항목은 자주 바뀝니다. 항목 하나가 늘 때마다 정의부터 손봐야 하고, 정의와 화면이 어긋나면 그것을 찾는 데 또 시간이 듭니다.

08 / 10

MOCA AI STUDIO

MOCA 는MOCA 는 개발 방법과 그 프로젝트의 개발표준을 AI 가 검색해 쓰는 형태로 제공합니다. 그 위에서 MOCA AI Studio 는 만들 화면을 말이나 설계서 그림으로 건네면 AI 에이전트가 표준에 맞는 화면·쿼리·메뉴까지 만들어 반영합니다. 설계에서 실행 코드까지 이어집니다. 규격을 고치면 자동완성과 API 문서와 AI 가 함께 따라옵니다.

왜 이렇게 만들었나 · 배경과 문제

배경이제 개발자 옆에는 AI 가 있습니다. 그런데 AI 는 그 프레임워크의 규격도, 그 프로젝트의 개발표준도 모릅니다.

그래서 생기는 문제모르는 채로 쓰면 개발자가 매번 설명하거나, AI 가 낸 그럴듯한 코드를 사람이 다시 고쳐야 합니다.

09 / 10

고성능

보이는 만큼만 그립니다

MOCA 는MOCA 의 그리드와 트리는 가상 렌더링으로 화면에 보이는 행만 만들고, 스크롤하면 그 창만 바꿔 끼웁니다. 1만 노드 트리도 실제 행은 수십 개뿐이고, 그리드는 100만 건을 나눠 받아 한 화면에 올린 뒤에도 정렬이 멈추지 않습니다. 문서 뷰어도 보이는 쪽만 그립니다. 데이터가 많아도 페이지를 나누지 않고 한 번에 보여 줍니다.

왜 이렇게 만들었나 · 배경과 문제

배경업무 화면은 데이터가 많습니다. 수만 건 목록, 수천·수만 개 부서·품목 트리가 흔합니다. 그런데 대부분의 화면 도구는 받은 데이터를 한 행에 하나씩 모두 DOM 으로 만듭니다.

그래서 생기는 문제건수가 늘면 브라우저가 그 DOM 을 감당하지 못합니다. 조회 한 번에 화면이 몇 초씩 멈추고 정렬·스크롤이 끊기며, 결국 서버에서 페이지를 잘라 보여 주는 쪽으로 물러납니다. 사용자는 전체를 한눈에 보지 못합니다.

10 / 10

MOCA ANYVIEW

무슨 파일이든 브라우저에서 바로 엽니다

MOCA 는MOCA AnyView 는 설치도, 서버 변환도 없이 브라우저가 문서를 직접 그립니다. PDF·워드·엑셀·PPT 는 물론 한글 문서(HWPX)까지 텍스트 선택·복사가 되고, 구형 EUC-KR 전문·수만 줄 로그·압축(ZIP) 내부 미리보기도 됩니다. 확장자를 몰라도 AnyView 가 판별하며, 페이지에 스크립트 두 줄이면 연동이 끝납니다.

왜 이렇게 만들었나 · 배경과 문제

배경업무 시스템에는 첨부 문서가 따라다닙니다. 게시판 첨부, 전자결재, 자료실마다 PDF·워드·엑셀·PPT·한글 문서가 쌓입니다.

그래서 생기는 문제문서를 보려면 내려받아 각 프로그램으로 열거나, 서버에서 이미지·PDF 로 바꿔 주는 변환 솔루션을 따로 둬야 했습니다. 변환 서버는 설치·라이선스·유지 비용이 들고, 변환된 문서는 글자를 선택하거나 복사할 수 없습니다.

04 / DEVELOPER TOOLS