'layout' 검색 결과

브랜드 자료, 스크린샷, 기존 코드를 바탕으로 HTML 랜딩 페이지와 슬라이드, 조작 가능한 프로토타입을 제작하고 구성과 시각적 대안을 비교하며 표시와 동작을 확인합니다.

• 브랜드 자료로 랜딩 페이지 제작
• 제품 조작 흐름의 프로토타입 제작
• HTML로 프레젠테이션 제작

글이나 자료를 비교도·연표·절차도 등의 인포그래픽으로 만듭니다. 21가지 레이아웃과 21가지 화풍을 조합해 이미지를 생성합니다.

• 비교 내용을 그림으로 설명할 때
• 작업 절차를 도식화할 때
• 연표를 이미지로 만들 때

PowerPoint 자료와 템플릿을 만들고 편집하며, 텍스트 추출과 슬라이드 병합·분할을 수행합니다. 파일 구조와 화면을 점검하고 글자 잘림과 겹침을 수정합니다.

• 내용을 바탕으로 PowerPoint 자료 제작
• 기존 템플릿으로 자료 업데이트
• 요약에 쓸 슬라이드 텍스트 추출

Claude Code 플러그인을 만들 때 설정 파일, 명령어, 스킬의 배치를 안내합니다. 자동 로딩과 설치 위치에 영향을 받지 않는 경로 설정을 다룹니다.

• 플러그인 기본 틀 만들기
• 명령어와 스킬 배치 정리하기
• 설치 위치에 의존하지 않는 경로 설정하기

승인된 화면 시안이나 글로 전달한 요구 사항을 Pretext를 사용하는 HTML/CSS로 구현합니다. 줄바꿈과 높이를 계산해 내용에 따라 달라지는 레이아웃을 만듭니다.

• 승인된 화면 시안을 HTML로 구현
• 글로 작성한 요구 사항으로 페이지 제작
• 텍스트 분량에 맞춰 바뀌는 레이아웃 구현

새 제품의 목적과 경쟁 제품 조사를 바탕으로 색상, 글꼴, 여백, 동작 규칙을 제안합니다. 미리보기로 확인하고 DESIGN.md에 설계 방향을 정리합니다.

• 새 제품의 시각적 방향을 정할 때
• 브랜드와 화면의 공통 규칙 문서화
• 글꼴과 색상 조합 확인

기존 디자인 체계에 따라 스마트폰부터 큰 화면까지 대응하는 UI를 구현합니다. 컴포넌트 구조와 상태 관리, 키보드 조작, 로딩 중·빈 데이터·오류 표시를 정리합니다.

• 새 페이지와 UI 컴포넌트를 만듭니다
• 스마트폰과 컴퓨터 화면을 조정합니다
• 키보드와 화면 읽기 지원을 개선합니다

데스크톱 랜딩 페이지의 구조를 회색 상자로 그립니다. 번호 주석과 사양 패널을 연결해 배치 및 구현 시 참고할 내용을 공유하는 와이어프레임을 만듭니다.

• 데스크톱 랜딩 페이지 구조를 검토할 때
• 개발 담당자에게 사양 메모를 전달할 때
• 내비게이션과 주요 홍보 영역 배치를 확인할 때

제품 소개, 기능, 이용 후기, 요금, 가입 안내를 담은 SaaS 소개 페이지를 만듭니다. DESIGN.md의 색상·글꼴·배치 규칙을 반영해 단일 HTML로 제공합니다.

• SaaS 제품 소개 페이지를 만들 때
• 기존 디자인 방향에 맞출 때
• 기능과 이용 후기, 요금을 함께 보여 줄 때

실버나 크림색을 바탕으로 부드러운 질감의 웹 시제품을 만듭니다. 이중 테두리 카드, 큰 둥근 모서리, 떠 있는 내비게이션과 자연스러운 움직임을 통일합니다.

• 차분한 SaaS 사이트 시제품 만들기
• 소비자용 사이트의 질감 검토하기
• 카드와 버튼으로 기능 소개하기

문화 잡지 개편안과 브랜드 제안을 분홍색, 크림색, 버건디의 세 가지 색상과 글꼴 대비로 정리합니다. 잡지 지면처럼 통일된 HTML 슬라이드를 만듭니다.

• 문화 잡지 개편안 제안
• 패션 브랜드 자료 제작
• 편집 디자인 방향 검토

가이드나 API 참고 문서를 탐색 메뉴, 본문, 목차의 세 열로 설계하고 코드 예시와 표를 담은 단일 HTML 페이지로 시제품을 만듭니다.

• API 참고 문서 시제품 제작
• 코드 예시가 있는 튜토리얼 작성
• 페이지 내 목차가 있는 가이드 설계

디지털 가이드의 표지와 본문을 나란히 보여 주는 HTML 시안을 만듭니다. 목차, 인용문, 단계 목록, 연습 공간을 배치하고 여백과 서체를 살려 지면을 구성합니다.

• 창작자용 가이드 시안 제작
• 룩북 지면 구성 검토
• 배포용 마케팅 자료 시안 제작

신제품을 소개하는 HTML 이메일을 만듭니다. 브랜드 로고, 제품 비주얼, 제목, 사양과 행동 유도 버튼을 중앙 정렬된 단일 열로 구성합니다.

• 신제품 출시 안내 이메일을 만듭니다
• 브랜드 뉴스레터 템플릿을 제작합니다
• 이메일로 제품 사양을 소개합니다

GSAP 플러그인으로 글자와 SVG 애니메이션, 드래그, 스크롤, 레이아웃 전환을 구현합니다. 용도에 맞는 기능 선택부터 등록, 설정, 정리까지 다룹니다.

• 제목을 한 글자나 한 줄씩 표시
• SVG 선 그리기와 도형 변형 추가
• 관성이 있는 드래그 구현

기존 웹 페이지나 HTML을 점검하고 콘텐츠와 브랜드를 유지하면서 시각 요소, 문구, 움직임, 사용성 문제를 수정해 공유 전에 마무리합니다.

• 생성한 페이지를 공유 전에 다듬습니다
• 획일적인 디자인과 불일치를 검토합니다
• 모바일 표시와 사용성 문제를 수정합니다

랜딩 페이지와 제품 사이트의 디자인을 섹션별 가로 이미지로 만듭니다. 색상과 서체를 통일하며 구도와 여백, 버튼 표현을 달리해 구현 참고 자료로 제공합니다.

• 랜딩 페이지를 섹션별로 검토합니다
• 첫 섹션의 구도를 검토합니다
• 개발자에게 참고 이미지를 공유합니다

웹사이트와 업무 화면을 용도에 맞게 디자인하고 작동하는 코드로 만듭니다. 글자 배치, 색상, 레이아웃과 함께 스마트폰 표시와 조작 상태도 다듬습니다.

• 시각적 방향이 명확한 랜딩 페이지 제작
• 일상 업무용 대시보드 설계
• 기존 UI의 외관과 조작 개선

잡지 지면과 전자종이를 떠올리게 하는 가로형 슬라이드를 만듭니다. 열 가지 배치와 다섯 가지 색상 구성으로 주장과 데이터를 인쇄물 같은 모습으로 정리합니다.

• 잡지 스타일의 자료로 주장 전달
• 연구 결과와 주요 수치 공유
• 장별로 구성한 발표 자료 제작

모호한 디자인 요청을 색상, 글꼴, 레이아웃 등 여덟 가지 관점으로 구체화합니다. 구현 기준이 될 명세서와 HTML 미리보기를 만들고 보완한 기본값도 명시합니다.

• 모호한 디자인 요청 구체화
• 랜딩 페이지 색상, 글꼴과 여백 설계
• HTML 미리보기로 외관 확인

제품 정보와 분석 결과를 16열 그리드와 하나의 강조색을 쓰는 HTML 슬라이드로 정리합니다. 22가지 고정 배치로 실제 데이터와 비교 내용을 전달합니다.

• 제품 로드맵 발표
• 핵심 지표와 순위 보고
• 개선 전후의 차이 설명

Design, build, or refine public websites using researched layouts, typography, palettes, and imagery. It develops a concept from the subject, checks the page in a real browser at three widths, and guides revisions through screenshot reviews.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Redesigning a landing page that looks generic
• Building a portfolio around a distinctive concept
• Checking typography and layout at three screen widths

Create a standard folder layout for a DDD bounded context, a module organized around one business area. Generate TypeScript export files, keep infrastructure outside the public exports, and record the context in a domain model graph.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Starting a module for a new business area
• Splitting a monolith into bounded contexts
• Listing existing contexts

Review and implement loading feedback for operations such as fetching content or submitting actions. Use skeleton placeholders, spinners, and accessible status updates to communicate progress, while checking for layout shifts and measuring actual performance bottlenecks.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding loading feedback during data fetching
• Showing progress while an action is running
• Checking screen reader announcements for loading states