'layout' 검색 결과

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

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

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

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

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

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

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

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

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

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

주제에 맞는 구성과 글꼴을 골라 공개 웹페이지를 기획하고 구현·검토합니다. 실제 브라우저 측정과 세 가지 화면 너비의 스크린샷을 바탕으로 개선합니다.

• 틀에 박힌 랜딩 페이지 재설계
• 독자적인 구상을 담은 포트폴리오 제작
• 세 화면 너비에서 글자와 배치 점검

업무 영역별로 코드를 나누는 DDD의 기본 구조를 만듭니다. 각 계층과 공개용 파일을 구성하고 생성 결과를 도메인 모델 그래프와 작업 메모리에 기록합니다.

• 새 업무 영역의 모듈 생성
• 업무 경계에 따라 모놀리스 분할
• 기존 컨텍스트 목록 확인

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

Review website images for file format, size, dimensions, and loading behavior. Produce improved HTML with image variants for different screen sizes, suitable compression, and deferred loading where appropriate, while addressing loading speed and layout shifts.

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

• Auditing image sizes and formats on slow-loading pages
• Serving suitable image sizes for mobile and desktop screens
• Preventing layout shifts while images load

Review long pages and dashboards to defer heavy components until they approach the visible screen area. Identify unnecessary initial JavaScript, introduce visibility-based loading, and preserve layout space so scrolling content is ready when needed.

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

• Defer charts located far down a dashboard
• Review loading behavior on long landing pages
• Load embeds and related products as they approach the screen

Review pages for languages written from right to left, including Arabic and Hebrew. Guide HTML direction settings, mixed-direction user content, and layout checks so browsers and screen readers handle text in the intended order.

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

• Review text direction on Arabic or Hebrew pages
• Handle names and posts with mixed writing directions
• Check navigation and icon layout mirroring

Review websites for content accidentally hidden by ad blockers. Identify problematic HTML class names and IDs, test affected pages with uBlock Origin, and suggest specific names that preserve the visibility and function of notices, banners, and consent controls.

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

• Investigating notices hidden by ad blockers
• Checking cookie consent controls for accidental hiding
• Reviewing HTML class names and IDs for blocking patterns

Inspect web font loading to identify invisible text, rendering delays, and layout shifts. Use measured evidence to guide fallback text display, preloading of important fonts, and the use of compressed formats such as WOFF2.

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

• Investigating invisible text during font loading
• Reviewing font-related layout shifts
• Adding fallback text display and font preloading

Check whether sticky headers, banners, or chat widgets hide controls reached with the keyboard. Review tab order, zoomed views, and mobile layouts, then suggest spacing or scrolling changes that keep the focused control and its indicator visible.

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

• Checking keyboard navigation around sticky headers
• Testing pages with cookie banners and chat widgets open
• Reviewing overlap in zoomed and mobile layouts

Review help links, chat controls, phone numbers, and FAQ entry points across related pages. Compare their relative positions and order under matching layout conditions, then identify changes that make support easier to find throughout a task.

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

• Reviewing help placement throughout checkout
• Aligning support links across onboarding steps
• Checking help entry points during account recovery

Review component styles to find where CSS containment, which isolates rendering work, can limit layout recalculation and repainting. Identify suitable components and off-screen list items, then check their appearance across screen sizes and interaction states.

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

• Reviewing pages with many independent components
• Reducing rendering work for off-screen list items
• Checking containment across screen sizes

Review how a page loads CSS, the rules that control its appearance. Inline the styles needed for the first visible content and load the rest asynchronously, while checking layouts across screen sizes and interaction states.

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

• Reviewing CSS that delays initial page rendering
• Extracting styles needed for the first visible screen
• Moving noncritical CSS to asynchronous loading

Review CSS animations for properties that cause costly layout updates, then suggest changes using transform and opacity. Check how effects look across screen sizes and interaction states, including support for users who prefer reduced motion.

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

• Reviewing animations that stutter
• Replacing position and size animations
• Checking reduced motion support

Build editable Three.js worlds from text or structured briefs, with terrain, distinct regions, landmarks, vegetation, and camera paths. Review the environment from multiple viewpoints and refine selected areas while preserving the overall layout and reproducible settings.

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

• Build a continuous 3D landscape from a written brief
• Plan a camera fly-through across distinct regions
• Refine one area's terrain or vegetation placement

Implement web animations with GSAP plugins, including animated layout changes, draggable elements, text effects, and SVG drawing or shape transitions. The skill explains plugin registration, configuration, cleanup, and development tools for inspecting animation timelines.

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

• Animating grid or list layout changes
• Adding draggable cards with momentum
• Revealing headings one character at a time

Guide HyperFrames video projects from setup through layout checks, editable previews, and video output. Covers command-line workflows, environment troubleshooting, and distributed rendering on AWS Lambda, which splits video rendering work across cloud functions.

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

• Setting up a HyperFrames video project
• Checking text overflow and scene display
• Exporting a video after reviewing it in Studio

Improve GSAP animation performance by reviewing animated properties, browser layout work, and simultaneous updates. Use transforms, grouped updates, reusable animations, and targeted cleanup to reduce stuttering in lists, mouse followers, and scroll effects.

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

• Reviewing stuttering GSAP animations
• Reducing animation load in long lists
• Optimizing mouse-following effects

Build reusable interface components with Tailwind CSS v4, using shared design values for colors, corners, and themes. Covers buttons, forms, responsive layouts, accessibility, and dark mode to help standardize interfaces across a project.

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

• Build a reusable UI component library
• Standardize colors and component styles
• Add responsive layouts and dark mode

Verify documents, spreadsheets, presentations, and web deliverables before sharing them. Combine file checks with inspection of freshly rendered output, and scan for unfinished text to catch clipped content, layout problems, and leftover placeholders.

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

• Check documents before delivery
• Inspect rendered pages for layout problems
• Find leftover placeholders and sample text