Frontend Design

• 새로운 UI 컴포넌트나 페이지를 구축할 때 단순한 기능적 정확성이 아닌 시각적 품질과 독창성이 중요한 경우.
• 제품이나 랜딩 페이지를 프로토타이핑할 때 자동 생성된 것이 아닌 실제로 디자인된 것처럼 보이기를 원하는 경우.
• 브랜드, 앱, 또는 캠페인을 위한 창의적인 방향을 탐색할 때 디자인 시스템을 확정하기 전에.
• 평범하거나 일반적인 기존 인터페이스를 교체할 때 명확한 미적 관점을 가진 것으로 대체하고자 하는 경우.

• 엄격한 브랜드/디자인 시스템 준수가 필요한 경우 — 이 스킬은 창의적인 독창성을 우선시하므로 기존 스타일 가이드와 다를 수 있습니다.
• 백엔드 API 또는 데이터 레이어만 필요한 경우 — 이 스킬은 프론트엔드 프레젠테이션 코드에만 집중합니다.

단 한 줄의 코드를 작성하기 전에, 이 스킬은 명확한 개념적 톤을 확립합니다 — 극도로 미니멀하거나, 맥시멀리스트적이거나, 유기적이거나, 럭셔리하거나, 인더스트리얼하거나, 에디토리얼하거나, 그 외 다양한 방향성 중 하나를 선택합니다. 그 결과물은 일관된 관점을 가진 인터페이스로, 평범하고 뒤섞인 결과물이 아닙니다.

일반적인 폰트 스택(Inter, Roboto, Arial)은 명시적으로 지양하며, 개성 있는 디스플레이 폰트와 본문 폰트의 조합을 선호합니다. 색상 팔레트는 소극적이고 균등하게 분산된 구성 대신, 주조색과 강렬한 강조색을 CSS 변수로 활용합니다.

애니메이션은 전략적으로 활용됩니다 — 단계적 딜레이를 적용한 페이지 로드 등장 연출, 스크롤 트리거 효과, 그리고 시선을 사로잡는 호버 상태까지. HTML에서는 CSS만을 활용한 솔루션을 선호하며, React 환경에서는 가능한 경우 Motion 라이브러리를 사용합니다.

배경은 단색을 넘어섭니다: 그라디언트 메시, 노이즈 텍스처, 기하학적 패턴, 레이어드 투명도, 강렬한 그림자, 그레인 오버레이, 장식적 테두리 등이 맥락에 맞게 활용되어 깊이감과 분위기를 만들어냅니다.

레이아웃은 비대칭, 겹침, 대각선 흐름, 그리드를 벗어난 요소를 선호합니다. 여백을 넉넉히 활용하거나 밀도를 조절하는 방식은 의도적으로 선택되며 — 결코 기본값으로 설정되지 않습니다.

생성된 코드는 HTML/CSS/JS, React, Vue 및 기타 프레임워크를 지원하는 기능적이고 프로덕션 수준의 코드입니다. 복잡성은 미적 비전에 맞게 조정되며, 맥시멀리스트 디자인에는 정교한 애니메이션이 포함되고, 미니멀리스트 디자인은 정밀함과 절제미를 제공합니다.

한 창업자가 경쟁사와 차별화되는 랜딩 페이지를 원합니다. Frontend Design 스킬은 강렬한 미적 방향성을 선택하고 — 예를 들어, 강한 타이포그래피 위계를 갖춘 에디토리얼/매거진 스타일 — 스크롤 애니메이션과 독창적인 색상 시스템을 갖춘 완전히 작동하는 페이지를 생성합니다.

디자이너나 개발자는 자신의 개성을 반영하는 개인 사이트가 필요합니다. Frontend Design은 템플릿처럼 보이는 구조를 피하고, 비대칭 레이아웃, 커스텀 커서, 신중하게 선택한 폰트 조합 등을 활용하여 기억에 남는 결과물을 만들어냅니다.

팀에서 표, 차트 카드, 필터 패널 등 데이터가 밀집된 인터페이스 컴포넌트를 필요로 하면서도 디자인된 느낌을 원할 때 활용됩니다. Frontend Design 스킬은 실용적이거나 세련된 미니멀리즘 미학을 적용하고, 세심한 간격 조정과 은은한 모션을 통해 컴포넌트가 완성도 높게 느껴지도록 만듭니다.

캠페인 페이지는 몰입감 있고 시각적으로 강렬해야 합니다. Frontend Design 스킬은 레이어드 시각 효과, 강렬한 타이포그래피, 그리고 진정한 즐거움을 선사하는 연출된 등장 애니메이션을 갖춘 맥시멀리스트적이고 애니메이션이 풍부한 페이지를 제작할 수 있습니다.