PC VIEW
PC 와이드 검토 화면
1440px 이상에서도 결과물, 페이지 유형, AI 샘플이 한눈에 비교되도록 밀도를 정리했습니다.
PC에서는 카드가 세로로만 이어지지 않도록 핵심 보드를 2열/3열로 펼칩니다.
기업/브랜드, 랜딩, 쇼핑몰/예약 페이지를 같은 높이의 3열 비교로 보여줍니다.
본문은 64~72ch 폭을 넘지 않게 제한하고, 큰 제목은 PC에서만 더 과감하게 보입니다.
1180px, 900px, 760px, 390px breakpoint를 유지해 태블릿/모바일도 깨지지 않게 둡니다.
PAGE TYPES
완성형 페이지 3종
기업 소개, 광고 랜딩, 쇼핑몰/예약/회원 기능 사이트를 실제 제안 화면처럼 확인합니다.
01기업/브랜드 소개 홈페이지
회사소개, 서비스소개, 포트폴리오, 문의하기가 있는 기본 홈페이지
PC complete layout
Brand story, services, portfolio, contact
AboutServicePortfolioContact
Brand proofService cardsProject cases
Mobile 회사 핵심 소개 → 서비스 → 사례 → 문의 CTA 순서로 압축합니다.
02랜딩페이지/광고용 상세페이지
광고 클릭 후 바로 문의, 구매, 상담 신청하게 만드는 1페이지 사이트
Conversion focused layout
Hero offer, pain point, benefit, proof, form CTA
OfferBenefitProofForm
Sticky CTABefore/AfterLead form
Mobile 첫 화면 CTA, 가격/혜택, 후기, 신청 폼을 짧은 흐름으로 배치합니다.
03쇼핑몰/예약·회원 기능 홈페이지
상품 판매, 결제, 예약, 회원가입, 관리자 기능이 필요한 사이트
Functional website layout
Products, booking, membership, admin workflow
ShopReserveMemberAdmin
Cart/PayScheduleDashboard
Mobile 상품 탐색, 예약, 로그인, 주문/예약 상태 확인을 빠르게 연결합니다.
CLIENT PUBLIC
공개용 검토 화면
내부 작업 설명보다 결과물, 선택 기준, 적용 흐름이 먼저 보이도록 정리했습니다.
메인/서브/모바일 결과물을 먼저 확인하고 세부 근거는 아래에서 봅니다.
320px, 390px, tablet, desktop에서 카드가 넘치지 않도록 줄바꿈과 간격을 보강했습니다.
클라이언트 검토/제안/프로젝트 브리프처럼 내부 맥락이 강한 표현을 클라이언트 검토용 표현으로 정리했습니다.
과장 표현은 줄이고, 실제 프로젝트 확정 전 확인이 필요한 항목은 중립적으로 남겼습니다.
READABILITY
1분 검토 동선
핵심 확인 순서, 쉬운 문장, 섹션 앵커, 대비와 간격을 빠르게 확인합니다.
먼저 Main 1P, Sub 3P, Mobile 390px를 보고 결과물 감각을 확인합니다.
Hero 후보 4안, 배너, 아이콘, 리터칭, 모바일 crop 샘플을 확인합니다.
Moodboard, Typography scale, Grid system, Style tile을 확인합니다.
실제 800개 블록 분석과 실제 AI 생성 완료를 과장 표현하지 않는지 확인합니다.
이 데모는 디자인 결과물, AI 샘플, Figma handoff, 접근성/성능 근거를 한 화면 흐름으로 보여주는 공개용 컨셉 샘플입니다.
키보드 사용자가 현재 위치를 볼 수 있도록 focus-visible 스타일을 강화했습니다.
각 섹션의 역할을 명확히 적어 스크롤 중에도 무엇을 봐야 하는지 바로 알 수 있게 했습니다.
문단 폭, 줄간격, 카드 간격, CTA 대비를 읽기 쉽게 보강했습니다.
IA + Wireframe Board
제공 IA를 빠르게 화면 설계로 전환
수주 프로젝트별 IA와 대략 와이어프레임을 받으면, 메인 1p·서브 3p·모바일 390px·800블록 매핑 기준으로 먼저 구조를 잠그고 디자인 완성도를 올립니다.
- Sitemap
- Main 1P
- Sub 3P
- Mobile 390
- Block mapping
- Figma handoff
IA / 대략 와이어프레임 수령
메뉴, 목적, CTA, 필수 섹션, 고객 동선을 먼저 정리합니다.
메인·서브·모바일 구조 분해
Hero, Trust, Service, Case, Contact처럼 재사용 가능한 화면 단위로 나눕니다.
800블록 조합 후보 연결
실제 원본 분석 완료를 주장하지 않고, 샘플 기반 매핑 방식만 공개합니다.
Hero, Trust, Service, Case, Process, CTA, Footer 순서.
About, Service, Contact의 목적별 섹션 밀도 조정.
390px 기준 sticky CTA와 읽기 순서 우선 설계.
Frame, Component, Export, QA 보드로 넘김.
공개용 컨셉 데모입니다. 실제 프로젝트에서는 제공 IA, 브랜드 자료, 원본 블록 확인 후 최종 와이어프레임을 확정합니다.
VISUAL DIRECTION
시각 완성도 보강
무드보드, 스타일 타일, 타이포 스케일, 그리드, polish before/after를 함께 봅니다.
Moodboard wallmineral green, copper, ivory paper, glass highlight
Typography scaleeditorial display, compact label, readable body hierarchy
Grid system12 column PC, 390px stacked rhythm, CTA safe area
Before / After polish설명형 데모에서 포트폴리오형 데모로 시각 전환
Style tile / Editorial Clinic
차분한 신뢰감과 프리미엄 진료 UX
- Warm ivory background
- Mineral green CTA
- Editorial hero crop
Style tile / SaaS Launch
정돈된 데이터 제품형 레이아웃
- Cobalt accent
- Trust metrics
- Modular pricing cards
Style tile / Premium Commerce
브랜드 감성과 전환 중심 상품 화면
- Copper campaign tone
- Banner system
- Mobile product stack
AI SAMPLE
AI 샘플 프리뷰
Hero, Background, Banner, Icon 용도별 컨셉 비주얼과 제작 증거 기준을 정리했습니다.
Hero A / SelectedEditorial clinic heroCTA 여백, 모바일 crop, 브랜드 신뢰감이 가장 좋음.
premium skincare clinic, translucent glass, warm daylight, editorial web hero, --ar 16:9
Hero BWarm product close-up감성은 좋지만 CTA 영역이 좁음.
soft cosmetic product macro, peach beige palette, clean premium ad
Hero CClean tech clinic전문성은 강하지만 뷰티 감성이 차가움.
medical aesthetic device, blue white studio, futuristic but calm
Hero DSoft wellness mood부드럽지만 클리닉 전환 CTA 힘은 약함.
wellness skincare spa, natural light, soft green, minimal background
Background video storyboard sample4컷 루프 구상: glow particle, glass panel, device silhouette, calm skin texture.
Banner set samplePC wide, mobile strip, square ad로 재가공하는 배너 샘플.
Icon set sampleLaser, booster, recovery, consult, follow-up SVG family.
Retouch before/after samplePhotoshop Generative Fill 흐름을 표시하는 before/after 샘플.
Mobile 390 crop sampleHero 중앙 피사체와 CTA safe area를 유지하는 crop 시뮬레이션.
- generation log
- prompt version
- candidate score
- license note
- retouch before/after
- export hash
AI PRODUCTION
AI 에셋 제작 흐름
Midjourney, Stable Diffusion, Firefly, Photoshop, Illustrator 작업을 브리프부터 증거까지 관리합니다.
목표, 고객, CTA, 감성어를 프롬프트 변수로 바꿉니다.
aspect ratio, style reference, negative prompt, seed, candidate count를 관리합니다.
브랜드 적합도, CTA 가독성, 모바일 crop, 권리 위험, 성능 예산으로 점수화합니다.
비파괴 리터칭, 빈 영역 확장, before-after evidence를 남깁니다.
아이콘을 grid, stroke, corner radius 기준으로 SVG export합니다.
실제 제작 로그, 라이선스 메모, export hash가 없으면 완료 주장하지 않습니다.
HANDOFF
Figma 핸드오프 구조
프레임, 컴포넌트, Export, AI Evidence, QA 항목을 전달 순서대로 정리합니다.
WCAG 2.2 board
접근성 QA
키보드 이동, focus visible, contrast, target size, reduced-motion을 확인합니다.
Core Web Vitals
성능 예산
LCP, INP, CLS를 해치지 않도록 Hero poster, lazy asset, 고정 비율, 모션 fallback을 분리합니다.
Builder workflow
Webflow, Framer, Wix Studio, Relume, Imweb/Temkit 전환 흐름
IA에서 블록 선택, Figma handoff, 에셋 export, 플랫폼 반응형 QA까지 이어지는 샘플 운영 흐름입니다.
800 block board
하단 보조 근거
공개용 컨셉 데모에서는 샘플 조합 전략만 표시하며, 실제 프로젝트에서는 원본 블록과 브랜드 자료 확인 후 반영합니다.
2 month plan
운영 계획
1주차 구조 파악, 2-3주차 병렬 시안, 4-6주차 AI 에셋/반응형 QA, 7-8주차 Figma handoff와 플랫폼 반영으로 진행합니다.
Timetrack evidence
검증 로그
started_at_kst, ended_at_kst, duration_minutes, input_refs, output_refs, evidence_refs를 ZIP evidence에 남깁니다.
Disclosure
공개용 컨셉 데모
- Design agency ready
- Visual direction board, style tiles, moodboard, grid, typography, polish before/after
- AI Samples
- Hero 후보 4안, 영상 스토리보드, 배너, 아이콘, 리터칭, 모바일 crop concept preview
- Main/Sub/Mobile
- Main 1P, Sub 3P, Mobile 390px 결과물 우선 배치
- Actual blocks
- 컨셉 샘플 기준. 실제 프로젝트에서는 원본 자료 확인 후 확정.