랜딩 블록으로 만든 회사 사이트
히어로, 고정 스크롤 서사, 벤토, 숫자 줄 같은 랜딩 블록을 스펙에 적으면 회사 사이트가 됩니다. 같은 루브릭으로 잰 사이트 트렌드 점수가 51.5 에서 89 로 올랐습니다.
아크로퓨처 회사 소개 · acrofuture-site.spec.yaml 줄인 발췌
스펙 하나에서 화면·API·DB 까지
A-Flow 는 YAML 로 쓰거나 캔버스에서 그린 스펙을 검증하고, 납품할 소스 코드로 생성합니다.
견본 e2e 105건 통과스펙 표현 100%차트 36종사내 견본 기준생성된 앱 화면 보기
스펙 한 장 위에 DB 스키마, API 계약, 화면이 층으로 떠 있습니다. 스펙의 긴급도 줄이 DB 의 urgency 열, API 의 urgency 조회 조건, 화면의 긴급도 표 열로 이어집니다. (도식) 견본 스펙과 생성물 일부. 가는 선은 긴급도 한 줄이 지나는 자리입니다.
스펙 한 장 위에 DB 스키마, API 계약, 화면이 층으로 떠 있습니다. 스펙의 긴급도 줄이 DB 의 urgency 열, API 의 urgency 조회 조건, 화면의 긴급도 표 열로 이어집니다.
스펙 한 장에 모두 적습니다
데이터(ERD), 화면, 연동 흐름, 디자인을 한 스펙에 적습니다.
(도식) 견본 「고객 VOC 인사이트」 스펙에서 줄인 부분
쓰고, 검증하고, 생성하고, 돌려 보고, 내보냅니다
작성
YAML 로 쓰거나, 스튜디오 캔버스에서 그려 만듭니다.
(도식) 같은 줄이 캔버스에서는 ERD 행이 됩니다
검증
모양(Zod), 참조 무결성, 저작 판정, 색 대비를 점검합니다. 오류가 있으면 생성하지 않습니다.
점검
오류가 없으면 생성합니다. 저작 판정과 색 대비는 생성을 막지 않고, 경고로 점검 목록에 「고치러 가기」와 함께 남습니다.
(도식) 검증을 보이려고 견본 스펙의 세 곳을 바꾼 예. 메시지 형식은 실제 검증기와 같습니다.
생성
프런트(Next.js 또는 React SPA/Vite), 백엔드(NestJS + Prisma), 계약(OpenAPI), 시드, e2e 테스트, Figma 패키지를 만듭니다.
(도식) 견본 생성물 일부. 긴급도 한 줄이 DB 열, API 조회 조건, 화면 머리칸이 됩니다.
실행·검증
생성물의 e2e 테스트(Playwright)를 자동으로 만들어 돌리고, 디자인 린트와 접근성을 점검합니다.
105건 통과, 견본 「고객 VOC 인사이트」 생성물 e2e, 사내 견본 기준
내보내기
코드 zip 과 Figma 패키지(zip)로 내보냅니다. 납품물은 소스 코드입니다.
(도식) 두 묶음의 목록 일부
프런트와 백엔드 사이에 계약을 둡니다
데이터는 ERD 캔버스에서 그리고, OpenAPI 와 DB 스키마를 중립 계약으로 둡니다.
(도식) 견본 데이터 11개 중 셋
계약 두 장
DB 스키마와 OpenAPI 가 프런트와 백엔드 사이의 계약입니다.
(도식) 견본 생성물의 schema.prisma 와 openapi.json 일부
스택
프런트는 Next.js 또는 React SPA(Vite), 백엔드는 NestJS + Prisma 로 생성합니다.
(도식) 견본 계약에서 줄인 부분
생성물은 처음부터 템플릿과 기능 팩을 갖춥니다
화면 템플릿
화면은 템플릿 11종에서 고릅니다.
화면 템플릿 11종
- 대시보드
- 목록(표)
- 입력 폼
- 상세
- 콘솔
- 문서
- 게시판 목록
- 게시판 글
- 랜딩
- 로그인
- 직접 구현
대시보드 위젯
- 숫자 타일
- 추이
- 구성(도넛·순위)
- 표
- 미터
- 상태
- 흐름
- 달력 히트맵
기능 팩
- 로그인(이메일·카카오·네이버)
- 파일 업로드
- 알림 센터
- 전역 검색(Ctrl K)
- 다국어
- 온보딩 가이드
- 도움말 챗
- 사용자별 위젯 배치
커넥터(선언형)
- 카카오 알림톡
- 카카오 로그인
- 네이버 로그인
- 포트원 결제
- HTTP 자기점검
반응형과 접근성
폰에서는 카드형 표와 바닥 탭으로 바뀝니다. 다크 모드, SVG 아이콘 66종, WCAG 2.1 AA 대비 점검, 모션 감소 대응을 기본으로 갖춥니다.
스튜디오에서 그리고, 보고, 고칩니다
캔버스
데이터 ERD 캔버스, 이동 관계선을 긋는 화면 캔버스, 노드를 선 위에 끼우는 연동 흐름 캔버스가 있습니다.
미리 보기
스펙으로 그린 사이트를 그 자리에서 보고, 그림 위에서 눌러 바로 고칩니다. 미리 보기는 생성물의 차트 부품을 그대로 싣습니다.
디자인
디자인 세트, 톤 12종, 프리셋 29종, 글꼴 4종, 다크 모드, 대비 배지를 고릅니다. 프리셋 29종의 조합 89가지는 디자인 검사를 오류 없이 통과했습니다.
AI 에게 시키기
단계마다 말로 지시하면 스펙 패치를 제안하고, 검증한 뒤 적용합니다. AI 는 코드가 아니라 스펙만 만듭니다.
점검
오류와 경고를 모아 보여 주고, 「고치러 가기」와 자동 고침을 제공합니다.
생성·내보내기: 코드 생성, 실행 명령, 코드 zip, Figma 패키지. 그 밖에: e2e 실행, 코드 보기, 곁창 너비 조절, 되돌리기 이력, Ctrl K 팔레트, 단축키, 튜토리얼, 모바일 대응
사내 견본으로 잰 숫자입니다
견본 「고객 VOC 인사이트」는 데이터 11, 화면 21, 연동 흐름 10을 스펙으로 모두 표현했고, 생성물 e2e 105건이 통과했습니다.
고객 실적이 아니라 사내 견본 기준입니다.
스펙 표현률(견본)
약 55초
신규 도메인(auto-parts)에서 스펙 작성, 생성, 구동으로 이어지는 파이프라인의 순수 실행 시간입니다. npm install 은 뺐습니다.
사내 견본 기준
| admin-dashboard | 100% |
|---|---|
| auto-parts | 97.1% |
| shop-admin | 92.3% |
원칙
스펙 줄이 실제로 도는 앱이 됩니다
아래 화면은 그림이 아니라, 견본 스펙에서 생성한 앱을 사내 시연 환경에 띄워 찍은 것입니다. 빛나는 스펙 줄이 화면의 어느 자리가 되는지 따라가 보세요.
캡처 2026-10-06, 사내 시연 환경. 화면 속 수치는 시연용 시드와 모의 주행 데이터입니다.
위젯 키로 그린 실시간 상황판
대시보드에 위젯 키만 적으면 숫자 타일, 순위, 도넛, 가로 막대가 그려지고 10초마다 새로 고칩니다. 차트 모양은 36종에서 고릅니다.
모빌리티 관제 데모 · fleet-control.spec.yaml 줄인 발췌
map 템플릿 한 줄로 관제 지도
template: map 한 줄에 차량 표식, 구역과 차고지 층, 따라가기, 오른쪽 목록과 곁창이 붙습니다. 모의 주행 120대는 실제 장치와 같은 수집 길로 들어오고, 시뮬레이션 표식은 지울 수 없습니다.
모빌리티 관제 데모 · fleet-control.spec.yaml 줄인 발췌
관제 화면도 스펙에서 나옵니다
지도 템플릿, 사건 규칙, 알람 팩, 실시간 갱신을 스펙에 적습니다. 견본 「모빌리티 관제 데모」는 모의 주행 120대로 돌립니다.
견본에서 잰 값
- 사건을 고치면 목록 줄에 닿기까지(p95)
- 0.21초
- 120대 모의 주행 중 20회, 2026-10-03
- 알람이 받은함에 닿기까지(p95)
- 0.265초
- 40회, 2026-10-03
- 500대 × 2Hz 지도 프레임(p95), 끊긴 프레임 0
- 16.9ms
- 20초 측정, 2026-10-03
- 사건 규칙 키
- 10종
- 과속, 급제동, 경로 이탈, 구역 들어옴 등
사내 견본에서 잰 값입니다. 고객 실적이 아닙니다.
시뮬레이션
격자 거리 위를 가상 차량 120대가 움직이고, 가끔 한 대에 알람이 붙어 오른쪽 알람 목록에 한 줄씩 쌓입니다.
차트 36종, 그리고 한 눈금으로 모은 디테일
위젯마다 chart 키 하나로 모양을 바꿉니다. 차트 2차에서 작은 배수, 파레토, 아령, 교차표, 목표 고리, 상태 띠 여섯을 더해 36종이 됐습니다. 카드마다 표로 보기, CSV, PNG 도 붙습니다.
기간별 막대기간마다 막대 하나
견본에서 잰 값
사내 견본 생성물에서 2026-10-01~03 에 잰 값입니다. 고객 실적이 아닙니다.
51.5 → 89
사이트 트렌드 점수
회사 사이트 견본을 같은 루브릭(11범주, 100점)으로 잰 점수입니다. 85 이상이 트렌드 선도입니다.
10 → 4
컨트롤 높이 종류
칩 계열도 10 → 4. 단추, 입력, 칩이 한 눈금으로 모였습니다(VOC v2 견본).
131 → 0
색 대비 위반(axe, 라이트)
다크도 148 → 0, 37화면(VOC v2 견본).
125ms
100만 행 위젯 p95 최대
막대 길이는 로그 눈금
PostgreSQL 17, 100만 행에서 2,572ms 였던 위젯을 고쳐 94개 모두 150ms 이하가 됐습니다.
미리 보기 = 생성물
스튜디오 미리 보기가 생성물 차트 부품을 그대로 싣고, 글자 하나까지 같은지 검사합니다. 곁창은 끌거나 화살표 키로 너비를 바꾸고 화면마다 기억합니다.
462 통과
스튜디오에서 e2e 실행
- e2e 실행 462 · 0 · 0
- 생성물 ESLint 골든 16사례 오류 0
- OpenAPI 검사기 16/16 오류 0
- 인스펙터에서 코드 보기
VOC v2 사본을 스튜디오에서 끝까지 돌려 실패 0, CLI 와 같은 수입니다.
그 밖에 새로
- 폼 입력 모양 8종(라디오, 세그, 금액, 전화, 마크다운 편집기, 스테퍼, 별점, 막대)
- 단계 폼
- 칸반 보드
- 일정 스케줄러(의존성 0)
- Postgres timestamptz
- 실시간 갱신(SSE)
- 차트 카드 표로 보기 · CSV · PNG
필요한 모듈만 골라 고객 사내에 설치합니다
납품판은 고객이 자기 조직 안에서 직접 화면을 만들도록 설치하는 판입니다. 화면, 디자인, 퍼블리싱, 점검, 테스트, 관리자 콘솔 같은 모듈을 골라 담습니다.
공통 바탕 위에 모듈 12개가 있고, 서명된 라이선스 파일로 켜고 끕니다. 라이선스 검증은 오프라인으로 하고, 꺼진 모듈은 메뉴와 API 에서 모두 막힙니다.
기존 사이트나 Figma 에서 시작할 수도 있습니다. 사이트 분석은 기존 화면에서 디자인 결(색, 글꼴, 간격)과 쪽 뼈대를 읽고, Figma 는 저장한 파일 JSON 을 올려 토큰과 부품을 가져옵니다. 둘 다 디자인 팩으로 모입니다.
모듈 조합
공통 바탕 위에 모듈 12개가 놓여 있습니다. 화면, 디자인, 퍼블리싱, 점검, 테스트, 관리자 콘솔은 켜져 있고, AI, Figma, 사이트 분석은 선택, 데이터, 연동, 개발은 꺼져 있습니다. 옆에 서명된 라이선스 파일 발췌와, 꺼진 모듈을 부를 때 돌아오는 403 응답이 있습니다.
퍼블리싱: HTML, JSP, Thymeleaf
데이터 모듈 없이 화면마다 견본 데이터를 적어 화면을 만들고, HTML, JSP, Thymeleaf 로 내보냅니다. 같은 스펙에서는 같은 바이트가 나옵니다.
고객의 기존 퍼블리싱 원본을 읽어 쪽 뼈대와 클래스 대응을 구조 프로필로 뽑고, 출력에 그 구조를 입힙니다. 얼마나 닮았는지는 구조 닮음 점수로 잽니다.
- 공통 CSS
- 부품 가이드
- 인계 문서(HANDOFF)
- 구조 닮음 점수
같은 로그인 폼, 세 형태
- HTML
pages/login.html<form action="#" method="post"> - JSP
pages/login.jsp<form action="${pageContext.request.contextPath}/login" method="post"><input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}">
- Thymeleaf
pages/login.html<form action="#" method="post" th:action="@{/login}">
로그인, 회원가입, 비밀번호 찾기와 재설정, 비밀번호 변경 화면도 Spring Security 규약(CSRF 자리, 오류 표시)에 맞춰 냅니다.
서버 쪽은 Spring Boot 3 견본(spring-kit)을 함께 드립니다. 보안 설정, 잠금, 비밀번호 정책, 감사, JPA 와 MyBatis 를 붙일 자리를 보여 주는 견본 코드이며, 서버 코드를 생성하지는 않습니다.
테스트: 퍼블리싱 결과를 브라우저로
퍼블리싱 묶음을 실제 브라우저(Chromium, 깔려 있으면 Edge)로 1440, 768, 390 폭에서 열어 네 가지를 봅니다.
- 시각 회귀
- 승인한 기준 그림과 픽셀 비교, 다른 점 0.1% 넘으면 실패
- 반응형
- 가로 넘침, 누르는 자리, 잘림, 겹침
- 접근성
- KWCAG 2.2 대응표의 자동 항목, 나머지는 수동 확인으로 남김
- 브라우저 호환
- 콘솔 오류, 못 받은 파일, 바깥 요청 0
기준 그림은 승인자만 승인하고, 바뀐 쪽은 승인 이유를 적어야 합니다.
품질 보고서
- HTML
- JSON
- manifest.json(SHA-256)
해시 목록으로 무결성을 확인합니다
보안과 폐쇄망 설치
금융권 심사 기준에 맞춰 스튜디오 계정 통제를 더했습니다. 로그인 성공, 실패, 로그아웃을 감사 기록에 남기고, 기간을 정해 찾습니다.
- 로그인 감사
- 유휴 끊기
- 2단계 인증 강제
- 비밀번호 만료
- 재사용 금지
- 잠금
- 초대 가입
계정 설정
- 비밀번호
- 10자, 3종 조합
- 만료
- 90일
- 재사용 금지
- 직전 3개
- 잠금
- 5회 틀리면
- 유휴 끊기
- 30분
- 2단계 인증
- 관리자 강제
- 가입
- 초대만
폐쇄망 설치 묶음은 실행에 필요한 패키지, 스튜디오 빌드, 테스트용 브라우저를 담고, 해시 목록이 묶음 전체를 덮습니다. 설치 뒤 스튜디오와 생성물, 퍼블리싱 출력은 바깥 주소로 요청하지 않습니다.
- 외부 호출 0
- SBOM(CycloneDX)
- SHA256SUMS
- Linux, Windows 서비스 설치 예
납품판 기능은 2026-11-02 A-Flow 저장소 기준입니다. 조합과 기본값은 계약마다 다릅니다.
기획자 · 디자이너 · 퍼블리셔, 바뀌는 업무 · 역할을 영상으로 봅니다
도입하기 전, 웹 구축에서 이런 일이 반복됩니다
- 기획서 · 디자인 · 퍼블리싱 · 개발 사이를 넘기며 생기는 어긋남
- 검수 때마다 같은 화면을 다시 고침
- 보안 · 접근성 검수 증적을 사람이 따로 모음
바뀌는 업무 · 역할
- 기획자
- 문서 전달자에서, 모두가 보는 화면 명세의 주인으로. 디자인 · 퍼블리싱 · 개발이 같은 명세를 봅니다
- 디자이너
- 화면 한 장씩 고치는 일에서, 디자인 기준(토큰 · 부품)을 관리하는 일로디자인 값 한 곳 → 전체 퍼블리싱 결과 약 2.4초
- 퍼블리셔
- 반복 마크업에서, 고객 표준 · 품질(접근성 · 반응형 · 호환) 검수로견본 화면 5개 → 퍼블리싱 결과 약 4.3초
- 운영 · 보안
- 고객 서버 · 폐쇄망 안에서 운영해 외부 반출이 안 되는 사업에도 쓸 수 있습니다
사내 견본 기준 · 2026-11-06
도입하면 좋아지는 것
- 업무
- 같은 명세를 보고 되묻기가 줄어듭니다 · 처음 맡은 담당자도 챗봇 · 가이드로 시작합니다
- 사업
- 고객 표준 산출물과 검수 · 보안 증적이 남고, 고객 서버 · 폐쇄망 안에서 운영해 외부 반출이 안 되는 사업에도 씁니다
- 비용
- 화면마다 하던 퍼블리싱 · 수정 · 재작업 공수가 줄고, 외부 SaaS 사용료 없이 자체 서버에서 운영합니다
스펙 한 장으로 시작합니다
A-Flow 는 (주)아크로퓨처 IT서비스사업팀이 웹사이트·모바일웹·관리자 사이트의 제작 시간을 줄이려고 만든 사내 플랫폼입니다.
스튜디오는 로그인이 필요합니다. 도입은 메일로 문의해 주세요.
# 납품물은 소스 코드입니다
런타임 노코드가 아니라, 스펙에서 코드를 생성합니다.
# AI 는 스펙만 만듭니다
AI 에게 시키면 스펙 패치가 나오고, 검증을 거쳐 생성됩니다.
# 약속은 Tier 1/2/3 으로 고정합니다
지원 범위를 Tier 1/2/3 으로 나눠 약속합니다.