PUBLIC PRODUCTION PROVENANCE · v9.1
웰쉐어 사회적협동조합 공식 전자명함 아틀리에 — 공개 제작노트
본 문서는 『웰쉐어 사회적협동조합 공식 스마트 전자명함』(https://wssc.co.kr/card/)의 디자인 개편, 모션·애니메이션 재설계, ㈜웰쉐어로지스 홍보관 및 통통허브(ttong.kr) 실시간 데이터 통합 과정, 실제 지시 프롬프트, 실행 환경 및 검수 결과를 투명하게 기록한 독자용 공개 제작노트입니다.
1. 실제 사용자 지시 원문
[지시 1]
전자 명함 디자인 이야기 한건데.
모션, 애니, 디자인 스킬을 다 반영 해서 다시 AI느낌 없이 재구성 해달라고
https://wssc.co.kr/card/
[지시 2 · 연혁 사실 정정]
작업 이어가
https://wssc.co.kr/card/
사이트의 전저명함 디자인 및 구성 변경 해줘.
모션, 애니, 디자인 스킬을 반영해서 AI 티 안나게 해주고, 디자인이랑 구성을 재구성 해줘
행복나눔유통은 12년에 창업 부천나눔지역자활센터이고 나중에 사회적협동조합 행복나눔으로 16년에 전환했어.,
지금 정보는 수원 돌봄 회사인 행복나눔이야
[지시 3 · 실사 이미지 첨부 · 로지스 홍보관 · 통통허브 데이터 통합]
이미지 첨부 해주고 로지스 홍보와 내가 만든 통통허브 데이터 함꼐 볼 수 있도록 해줘.
* 첨부 참조 자산: REF-ASSET-CARD-UW-01 (2560px 울트라와이드 캡처본), REF-ASSET-CARD-CAREER-02 (창업 연혁 정정 표시 캡처본), REF-ASSET-CARD-DIR-03 (하단 공식 채널 영역 및 영상 그리드 캡처본 · 개인 로컬 경로 비공개 치환)
2. 선택한 조판·모션 연출 및 수정 사유
| 구분 | 개편 전 문제점 | 개편 후 연출 및 공학적 근거 |
|---|---|---|
| 공간·조판 구조 | 상단 294px 네이비 배경 띠 단절, 카드 안의 카드 3중 중첩, 45개 이상의 둥근 알약 버튼 과밀, 하단 검은 플로팅 바의 본문 가림 | 따뜻한 아카이브 지류(#F4F2ED) 단일 캔버스 + 1px 건축 헤어라인 2단 원장(Ledger) 구조로 통합하고 데스크톱 하단 겹침 독을 제거 |
| 실물 명함 3D 물리 | CSS 변수 간접 전달 및 트랜지션 중첩으로 인한 포인터 지연 | requestAnimationFrame 감쇠 스프링 보간(lerp = 0.14)으로 GPU transform: perspective(1400px) rotateX/Y 직접 구동 + 대각선 포일 광택 |
| 탭·필터 전환 모션 | 배경 알약이 깜빡이며 바뀌는 정적 탭 | 활성 탭의 위치·폭을 실측해 translate3d + scaleX로 미끄러지는 GPU 슬라이딩 언더라인 인디케이터 및 210ms 비차단 패널 전환 |
| 핵심 CTA 마이크로 모션 | 단순 밝기 변화만 있는 정적 버튼 | 호버 시 텍스트 트랙이 수직 교차하는 텍스트 롤(Text-Roll) 및 :active scale(0.975) 촉각 피드백 적용 |
| 모바일 풀스크린 경험 | 첫 화면 명함 가독성과 하단 챕터 이동의 일관성 필요 | 휴대폰 첫 화면(100svh) 전체화면 세로형 실물 명함 보존 + 슬라이드 다운 6챕터 원장 조판 및 안전영역(safe-area-inset) 적용 |
| 창업 연혁 정본 교정 | 타 법인(수원 돌봄 자활기업 행복나눔 · 2010.07~2020.03 수원우만지역자활센터) 정보 오기재 | 2012년 부천나눔지역자활센터 『행복나눔유통』 창업 → 2016년 『사회적협동조합 행복나눔』 전환으로 대표 프로필·영문판·확대 약력·A4 인쇄본 전수 정정 |
| 로지스 홍보관 · 실사 이미지 | 하단 공식 채널이 텍스트 위주로 건조하고 우측 화살표 여백이 부족하며, 첫 화면에서 ㈜웰쉐어로지스 3대 사업부 비주얼 홍보가 분리됨 | 화성 본사 실사 및 3대 사업부(물류·전산AX·건물위생) WebP 비주얼 플레이트 탑재, 고객 혜택 중심 슬로건(“웰쉐어 로지스는 기업의 어려움을 함께 합니다.” · “팔지 않습니다. 함께 설계합니다.”) 적용 및 6대 공식 채널 실사 썸네일·대칭 여백으로 우측 클리핑 완전 해소 |
| 통통허브 실시간 데이터 통합 | 직접 구축한 통통허브(ttong.kr) 업무 시스템·무료 배포 앱·창작 데이터를 명함 안에서 바로 탐색할 수 없음 |
무지연(0ms) 부트스트랩 스냅샷 + 동일 출처 5분 캐시 API(/wssc-api/ttong-hub) 이중 아키텍처로 공개 운영 시스템 14종(실제 구동 화면 첨부), 무료 배포 앱·PC도구 11종(공식 아이콘 첨부), 유튜브 5채널·창작 417편·자활사업 아이디어 10선을 GPU 슬라이딩 탭으로 통합 |
3. 제작 환경 및 실제 AI·도구 사용 내역
- 실제 수행 에이전트: Antigravity (단독 실행 · 사용자 정의 디자인/모션 스킬 규칙 적용)
- 적용 설계 규범: 에디토리얼 타이포그래피·안티 AI 슬롭 조판(
frontend-design,hallmark,impeccable), 물리 기반 웹 애니메이션 및 감사(모션사이트,animate,emil-design-eng,review-animations), 모바일 네이티브 터치 최적화(mobile-native) - 실측 런타임 및 검증 도구: Windows / Python 3.11 정적 빌더(
wssc_site/build.py) / Playwright Chromium 헤드리스 다중 해상도(2560×1080,1440×900,390×844,360×800) 시각·콘솔 무결성 검수 - AI 보조 제작 고지: 레이아웃·CSS·모션 코드는 AI 에이전트(Antigravity)를 통해 작성·검증되었으며, 모든 법인 인가번호·결산 매출·실적 수치는 웰쉐어 사회적협동조합 공인 정본 데이터를 그대로 보존했습니다.
4. 검수 결과 요약
- 금지 CSS 애니메이션 패턴(
transition: all,scale(0),ease-in, 레이아웃 높이 애니메이션): 0건 - 다중 뷰포트 가로 넘침(Horizontal Overflow) 및 브라우저 콘솔·네트워크 오류: 0건
- 순수 주소 정화(
?v=캐시 쿼리 자동 제거 →https://wssc.co.kr/card/) 및 다크 모드·화이트 코튼 스킨·A4 인쇄 엔진 동작: 통과 - 미완료 검수 항목: 없음