디자이너 작업실 사용법

Studio의 파일·스킬 작업실은 기획·디자인·개발이 같은 상품 지침을 보며 실제 React 화면을 만드는 공간이다. 완성본은 검증한 React 소스와 배포용 파일이다. HTML 원본 검사는 참고 시안을 확인하는 별도 기능이다.

2026-09-11 검증 기록: 아래는 당시 확인 결과이며 현재 배포를 다시 검사한 결과가 아니다. 사용 흐름은 루트 SPEC.md §7-1, 날짜가 있는 증거는 §16과 구현 점검을 따른다. 백엔드와 라이브 React 시안의 필수 검사를 확인했다. Astra의 기준안+변형 2개와 Fable의 새 UX 1개가 모두 2라운드에서 통과했으며, 필수 안내 화면을 포함한 동작 5개 규칙·접근성·실제 React 타입·빌드를 검사했다. 이 실행에는 원본 이미지 비교 기준이 없어 픽셀 비교는 미수행이다. 선택한 Astra 기준안과 Fable 시안은 실제 승인 후, AI 호출 없는 AWS 재빌드·브라우저 검사와 승인 화면 대비 2% 비교를 통과했다. 소스·배포 ZIP은 비공개로 저장하고 다운로드 해시를 확인했다. 새 UI는 게시되었으며 FHD/QHD/WQHD에서 실제 미리보기 동작과 릴리스 결과 화면을 확인했다.

1. 개인 작업실 또는 프로젝트 선택

혼자 검토할 자료는 개인 작업실, 참여자와 함께 사용할 자료는 해당 프로젝트를 선택한다. 개인 파일과 이전 이력이 프로젝트에 자동으로 공유되지는 않는다. 파일을 올리기 전에 선택한 공간을 확인한다.

새 공동 작업은 새 프로젝트 → 프로젝트 만들기로 시작한다. 관리자는 기존 사용자를 찾아 참여자와 역할을 정한다. 사용자 조회가 초대 이메일을 보내는 것은 아니다. 프로젝트를 바꾸면 해당 공간의 자료와 권한을 다시 확인한다.

모든 참여자는 프로젝트 자료를 읽고 파일을 반입하며 의견을 남길 수 있다. 아래의 관리자는 프로젝트 owner 역할이며 플랫폼 전체 관리자와 자동으로 같지 않다. 추가 작업 권한은 다음과 같다.

역할	할 수 있는 작업
관리자	참여자 관리와 기획·디자인·개발 작업 전체
기획	상품 지침 작성·게시, 검증 규칙 편집·승인
디자인	검증 규칙 편집·승인, 시안 생성·수정·승인, 승인 소스의 릴리스 준비
개발	승인 소스의 릴리스 준비, 등록된 Git 저장소로 내보내기

2. 공동 작업의 상품 지침 확정

오른쪽 함께 검토하기 → 기획·지침에서 공유 상품을 선택하거나 새로 만든다. 기획 담당자는 상품 설명, 가입·업무 조건, 진행 절차, 반드시 표시할 안내문을 작성한다.

1. 상품 지침 저장으로 초안을 저장한다.
2. 내용을 확인하고 이 초안을 새 기준으로 게시합니다를 선택한다.
3. 버전 고정·지침 게시를 누른다.

초안 저장과 기준 게시는 다르다. 게시하면 그 버전의 지침과 상품·조건·절차·안내의 연결 정보가 비공개로 저장된다. 화면의 저장된 연결 정보 확인은 이 저장 자료를 읽은 결과다. 지침을 게시했다는 사실만으로 실행 화면이 통과한 것은 아니다.

새 지침을 게시하면 관련 시안에 재검증이 필요하다. 이전 승인 기록은 남지만 최신 지침의 승인으로 재사용하지 않는다. 개인 작업실에서는 공동 상품 지침 없이 반입 자료와 직접 확인한 규칙으로 작업할 수 있다.

3. 파일 준비

외부에서 전달받아 조직의 반입 절차를 거친 HTML·CSS·PNG·JPG·SVG와 업무 문서를 추가한다. 파일별 용도를 확인하고 비공개 보관하기를 누른다. 한 파일은 최대 50MiB이며 전송 실패 시 같은 파일을 다시 전송할 수 있다. Figma 계정·플러그인이나 직접 작성한 JSON은 필요하지 않다. Studio가 외부 Figma·CDN 파일을 대신 내려받지는 않는다.

자료	사용하는 방법
화면 PNG/JPG	화면 참고 자료, 선택한 시작 화면의 비교 기준
로고·아이콘 PNG/JPG/SVG	화면에 사용할 이미지 자산
HTML과 함께 받은 CSS	원본 검사에 사용할 로컬 스타일, React 구성의 참고 자료
MD/TXT/PDF 등의 업무 설명	조건·안내·검증 규칙의 근거
SKILL.md 등 작업 지침	AI가 참고할 설명 자료
FIG	원본 보관. 내부 화면 해석·렌더링은 미지원

컴포넌트의 기준은 문서나 반입 HTML이 아니라 실제 React 코드다. 현재는 15개 컴포넌트를 갖춘 플랫폼 기본 React 컴포넌트를 사용한다. 고객의 사내 React 패키지는 아직 제공되지 않았다. CSS나 스킬 문서를 올려도 이 코드와 스타일을 임의로 바꾸거나 사내 승인 컴포넌트로 등록하지 않는다.

원본, 미리보기, 추출 텍스트는 구분해 보관한다. 보관 완료·해석 완료·화면 검증 통과도 서로 다른 상태다. 공동 상품의 게시 지침은 규칙에 자동으로 포함되므로 일반 파일처럼 다시 반입하거나 사용 제외하지 않는다.

준비된 React 샘플로 시작하기

아직 고객사의 컴포넌트 라이브러리나 디자인 자료가 없다면 파일 준비 → React 샘플 둘러보기를 연다. 고정된 기본 컴포넌트를 조합한 세 가지 예제를 직접 눌러볼 수 있다.

샘플	눌러볼 곳
납입금액 입력·확인	금액·기간 변경, 범위 밖 입력, 다음·뒤로가기, 합계 확인
필수 안내·동의	필수 누락 차단, 필수 일괄 확인, 선택 항목, 동의 철회·초기화
상품 비교·선택	카드형·목록형 전환, 상품·기간 선택, 확인 화면과 재선택

HTML과 가이드를 내려받아 파일 준비에서 함께 올리면 반입부터 규칙 제안·수정·생성을 연습할 수 있다. HTML은 첫 화면의 마크업도 포함하므로 스크립트를 실행하지 않는 반입 미리보기에서도 화면과 입력 항목이 보인다. 이는 동작 확인용 가상 예시다. 실제 약관·상품 조건을 쓰려면 기획팀의 승인된 지침으로 바꾼다. 샘플에서 새로 생성한 화면도 별도 검수와 승인이 필요하다.

개발자는 React 소스 ZIP에서 실제 컴포넌트 코드와 화면 로직, 고정된 의존성, 동작 테스트를 확인한다. 배포 ZIP은 같은 소스를 빌드한 정적 파일이다. 현재 반입 화면은 React 프로젝트 ZIP을 직접 실행하지 않으므로, 소스 ZIP은 개발자에게 전달한다.

4. 규칙 확인·승인

규칙 확인·승인에서 사용할 자료와 공유 상품을 확인하고, 만들 화면을 설명한다. 허용된 Bedrock 모델에 규칙 제안을 요청하거나 담당자가 규칙을 작성한다.

예를 들어 납입금액 입력 → 다음 버튼 클릭 → 확인 화면에 같은 금액 표시, 필수 동의 전 제출 불가, 잘못된 금액의 오류 표시, 뒤로 가기, 필수 안내 페이지 접근을 확인한다.

원문 근거와 AI의 추정을 구분하고, 동작·기대값·필수 안내문을 검토한다. 규칙 저장 → 검토 확인 → 해당 버전 규칙 승인 순서로 확정한다. 미해결 조건이 있으면 승인할 수 없다. 규칙을 수정하면 이전 승인은 새 버전에 적용되지 않는다.

5. 새 UX 또는 기준안·변형안 만들기

생성·검수·수정에서 승인한 규칙과 생성 방식을 선택한다.

생성 방식	결과
새 UX 만들기	필수 지침 안에서 새 시안 1개
가이드 준수 비교	엄격 기준안 1개 + 추가 변형 2~5개, 총 3~6개

모든 안은 같은 필수 업무 규칙과 React 컴포넌트 기준을 사용한다. 배치·밀도·강조·정보 순서 등 허용된 구성만 달라진다. 한 안이 실패해도 다른 안의 결과는 유지된다.

시작 화면을 비교하려면 기준 이미지·페이지·화면 크기를 확인한다. 기준 이미지가 없으면 시각 비교는 미수행이다. 변형안의 의도적인 차이는 디자이너가 검토·수용한다. 이를 원본과의 픽셀 일치 통과로 표시하지 않는다.

반입 HTML 검사는 선택한 원본을 AI로 다시 쓰지 않고 검사하는 기능이다. 선택한 고유한 로컬 CSS·이미지만 연결하며, 외부 URL이나 누락 리소스를 자동 조회하지 않는다. 이 결과를 React 프로젝트의 빌드·릴리스 승인으로 사용할 수는 없다.

6. 실제 근거를 보고 수정·승인

작업실은 실제 React 타입 검사와 배포용 빌드 후, 격리된 브라우저에서 입력·클릭·값 전달·동의·오류·스타일을 시험한다. 접근성, 브라우저 오류, 외부 요청과 선택한 이미지 비교 결과도 확인한다. 실패하거나 실행하지 못한 검사는 통과로 바꾸지 않는다.

보고 있는 시안과 라운드를 선택한 뒤 수정 지시를 준다. 수정은 같은 승인 규칙과 컴포넌트 기준으로 다시 검사한다. 진행 표시나 높은 점수만으로 승인하지 않는다. 필수 검사와 해당 소스·화면·검수 근거가 일치할 때 그 라운드를 승인한다. 변형안에는 허용된 차이를 확인했다는 동의도 필요하다.

의견 탭의 논의는 선택한 상품·지침·시안·페이지·라운드에 연결된다. 의견 작성은 시안 승인이 아니다.

7. 승인 소스를 개발팀에 전달

개발·내보내기 → 승인 소스 재빌드·릴리스 검사를 사용한다. 디자인·개발·관리자가 실행할 수 있으며, AI를 다시 호출하지 않고 승인한 같은 소스를 빌드하고 검사한다. 소스·컴포넌트·배포 파일의 동일성을 확인하고, 디자이너가 승인한 시작 화면과 다시 비교한다. 허용 차이는 **2%**다. 이 비교는 승인한 시작 화면의 유지 검사이며 모든 페이지·상태의 픽셀 검증은 아니다.

통과한 릴리스에서는 다음 자료를 내려받을 수 있다.

• React 소스 ZIP: 실제 컴포넌트 코드, 화면 소스, 고정된 의존성·빌드 설정, 검증 규칙과 테스트.
• S3 배포용 번들 ZIP: 정적 웹 배포에 사용할 결과 파일.
• 릴리스 목록·재검증 근거: 전달할 파일과 검사 결과를 확인하는 자료.

자료는 비공개 S3에 보관한다. 배포용 파일이 준비됐다는 이유로 공개 사이트나 고객 환경에 자동 게시하지 않는다.

Git 내보내기는 관리자가 등록한 저장소의 기능 브랜치만 사용한다. 2026-09-11 기록에서는 고객 Git 대상이 미설정이었다. 실제 사용 전 현재 대상 설정을 확인한다. 연결 전에는 소스를 내려받아 전달할 수 있지만 원격 브랜치·커밋 성공을 표시하지 않는다. 연결 후에도 공개 범위 확인이 필요한 대상은 내보내기 전에 확인하며, 충돌을 강제로 덮어쓰지 않는다.

결과를 사용할 때 확인할 것

표시·상황	다음 행동
상품 지침이나 규칙이 바뀜	최신 기준으로 새 규칙을 확인·승인하고 재검증
빌드 실패·미판정·필수 검사 실패	근거를 확인해 수정. 릴리스로 전달하지 않음
일부 자료 해석·OCR 미완료	빠진 조건을 담당자가 확인하고 적용 범위를 명시
Git 커밋은 완료됐지만 최신 기준 확인 불가	커밋 기록은 보존하고, 현재 기준 확인 전에는 최신 배포 승인으로 사용하지 않음
기존 HTML 시안·승인 이력	참고 이력으로 사용. 새 React 릴리스 승인으로 자동 전환되지 않음

검증은 승인한 테스트와 제공된 환경의 범위에 한정된다. 실제 금융 인증·거래 API는 제공된 테스트 범위 밖이다. 고객 React 패키지 연결, 고객 Git 대상 등록, 기존 갤러리·초안의 전체 이관 완료를 이 안내가 뜻하지 않는다.