저는 한글이 영문보다 토큰을 4배 가량 더 소모한다고 이야기를 들은 적이 있어서 요구사항을 한번 영문으로 바꾼 다음에 넘겨줬어요.
You are a web designer creating a refined IT developer club homepage.
Organization Details:
- Name: [Your Club Name]
- Characteristics: No external sponsorship, continuous recruitment
- Key Content: Team Members, Projects, Contact, Gallery
Design Guidelines:
- Header & Hero Section
- Navigation bar: Home, Team, Projects, Gallery, Contact (sticky or scroll-triggered)
- Brand name + tagline (one-line identity statement)
- CTA button: "Get Started" or "Join Now"
- Background: Modern gradient or solid color (dark or minimal aesthetic)
- Statistics & Trust Section
- 4 key metrics (e.g., operating period, member count, launched projects, total collaborators)
- Numbers large and bold; labels small and light (visual hierarchy)
- Optional: icon or background color for each stat
- Team Members Section
- Grid layout (3-4 columns, responsive)
- Each member card:
- Profile photo (rounded or square corners)
- Name + role/position
- One-line bio or key skills
- Hover effect: background shift, text reveal, or slight scale
- Optional: filter by role (All, Dev, Design)
- Projects Section
- Project cards (image + title + brief description)
- Carousel UI (prev/next buttons) or grid (2-3 columns) + "View More"
- Card hover: subtle overlay + expanded description or slide animation
- Optional: category filter (App, Web, Game, etc.)
- Gallery Section
- Title: "Our Moments" or "Activity Snapshots"
- Image gallery (3-4 column masonry or lightbox)
- Hover labels (e.g., "Team Meeting", "Demo Day", "Team Building")
- Optional: infinite scroll or pagination
- Mobile-responsive layout
- Contact Section
- Header: "Want to grow with us?" or "Join our story"
- Form fields: Name, Email, Role, Message
- Submit button: Clear CTA (e.g., "Send Inquiry", "Join Us")
- Alternative channels: Email, KakaoTalk, Instagram (icon links)
- Background: emphasis color section (contrast effect)
- Footer
- Brief info: club name, tagline, continuous recruitment notice
- SNS icon links (GitHub, Instagram, Blog, etc.)
- Copyright notice
- Optional: quick links (Home, Contact, Recruitment Info)
Visual Consistency:
- Color palette: Modern, refined tones (e.g., black + white + 1-2 accent colors)
- Typography: Bold, large titles; readable body text (1.5-1.6 line height)
- Spacing: Generous padding between sections, consistent gaps between elements (8px units)
- Icons: Line or fill style consistency
- Smooth transitions: 200-300ms animations on hover/click
Responsive Design:
- Desktop (1200px+): Full layout
- Tablet (768-1199px): Flexible 2-3 column adjustment