세련된 흑백 포트폴리오 사이트
Best for design studio, branding agency and etc.
지시사항
1단계 — 브랜드 확정 및 콘텐츠 초안 작성 (최소한의 요청만 필요).
나중에 필요할 지연 로드 도구를 먼저 로드합니다. 2단계와 3단계 전에 generateImage 및 generateWebpage에 대한 toolSearch를 호출하여 준비합니다.
그런 다음 사용자의 메시지와 모든 @참조를 스캔하여 브랜드/스튜디오 이름, 브랜드의 주요 사업 분야, 슬로건, 프로젝트 이름, 서비스 목록, 업로드/참조된 이미지 등을 확인합니다(이러한 정보는 2단계에서 추적해야 하며, 해당 정보가 차지하는 슬롯은 다시 생성하지 마십시오).
질문 규칙 (간단하게 질문하세요. 사용자는 간결한 상호작용을 선호합니다):
- 브랜드 이름과 브랜드 핵심 내용이 모두 누락된 경우, 두 개의 질문을 일괄적으로 askUserQuestion 함수에 한 번만 호출하세요.
Q1 "스튜디오/브랜드 이름은?" - 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject' 등의 옵션이 있습니다.
Q2 "브랜드는 무엇을 하는 곳인가요?" — '디자인 에이전시', '사진 스튜디오', '건축 회사', '패션 브랜드', '개인 포트폴리오' 등의 선택지.
- 만약 하나만 빠져 있다면, 그 하나만 물어보세요.
- 사용자의 메시지에 두 가지 모두 포함되어 있다면, 아무것도 묻지 말고 바로 진행하세요.
브랜드 이름과 핵심 콘셉트가 정해지면, 더 이상 질문 없이 나머지는 직접 작성하세요. 어조는 편집 스타일처럼 자신감 있고 간결하며 고급스러워야 합니다. 간결한 문구를 사용하세요. 이 스타일은 장황함보다는 여백을 통해 숨 쉬는 듯한 느낌을 줍니다.
초안:
- 태그라인: 'Design / the future', 'Frame / the world', 'Build / the lasting', 'Make / it last'처럼 하나의 문구처럼 읽히는 짧은 두 줄로 구성합니다. 각 줄은 1~2단어로 하고, 줄 바꿈은 세리프 이탤릭체와 세리프 일반체를 함께 사용하여 구분합니다.
- 소개글 작성 요령: 약 80단어, 짧은 단락 두 개 분량. 설립 연도(예: '80년대 이후'), 주요 서비스 몇 가지, 그리고 글로벌 고객 및 업계 수상 경력을 언급하세요.
- 사례 연구 3개. 각 사례 연구에 대해 다음 내용을 포함하세요: 주제에 맞는 독창적인 프로젝트 이름 (디자인 에이전시의 경우 'Schematiq', 'Commercial Co.', 'Sprig & Sky'와 같은 이름을 재사용하고, 다른 분야의 경우 유사한 느낌의 이름을 선택하세요), 1~2개의 서비스 태그, 약 30단어 분량의 배경 설명, 약 30단어 분량의 해결책 설명.
- 핵심 분야와 관련된 6개의 서비스 태그 (기본값: 브랜드 활성화, 통합 마케팅, 웹사이트 개발, 비디오 제작, 브랜드 아이덴티티, 브랜드 전략 - 에이전시 외 분야에 맞게 조정).
- 마무리 CTA 슬로건 (한 줄, 약 10~14단어), 예: '브랜드를 한 단계 끌어올리고 역사에 발자취를 남기세요.'
- 바닥글 항목: 스튜디오 이름, '이용 약관 및 지원', '개인정보 보호정책'.
3단계를 위해 모든 콘텐츠를 메모리에 저장하십시오. 아직 generateWebpage를 호출하지 마십시오.
2단계 — 서로 일관성 있는 흑백 이미지 6개를 정확히 조합합니다.
슬롯 맵: 영웅, 소개, 프로젝트 1, 프로젝트 2, 프로젝트 3, 기능.
A) 사용자가 이미 이미지를 제공한 경우(업로드된 이미지, @references, 메시지에 포함된 URL 등), 제공 순서대로 슬롯에 이미지를 할당하고 해당 슬롯에 대한 이미지 생성은 건너뜁니다. 나머지 슬롯에 대해서만 이미지를 생성합니다.
B) 빈 슬롯마다 generateImage 함수를 호출하십시오. 가능하면 하나의 툴 배치에서 이 함수들을 병렬로 실행하십시오.
모든 슬롯에 적용되는 협상 불가능한 이미지 스타일:
- 순수 흑백 사진만 제공합니다. 색조, 세피아, 듀오톤을 일절 사용하지 않습니다. 에디토리얼/영화/고급 잡지 수준의 품질을 자랑합니다. 6개 페이지 모두 일관된 명암과 입자감을 유지하며, 레이아웃에 따라 여백을 충분히 활용합니다.
슬롯 프롬프트 템플릿 — [DISCIPLINE]을 1단계에서 정한 브랜드 초점(예: '디자인 에이전시', '사진 스튜디오', '건축 회사')으로, [DISCIPLINE_SUBJECT]를 적절한 주제(예: 디자인: 종이 조각/타이포그래피 클로즈업; 건축: 그림자 기하학; 패션: 실루엣; 사진: 정물)로 대체하세요.
1. 히어로 (16:9 비율): "[분야_주제]를 담은 영화 같은 흑백 사진, 극적인 편집 구성, 세련된 미니멀리즘 흑백 미학, 부드러운 상단 조명, 충분한 여백, 고급 잡지 품질, 무채색, 높은 콘트라스트."
2. 설명 (4:3 비율): "현대적인 [DISCIPLINE] 스튜디오 내부를 담은 흑백 다큐멘터리 사진. 부드러운 자연광이 들어오는 큰 창문, 미니멀한 책상과 도구들, 에디토리얼 리포트 스타일, 흑백 사진, 높은 콘트라스트."
3. 프로젝트_1 (1:1 비율): "깨끗한 흰색 배경 위에 브랜드 아이덴티티 목업(명함, 레터헤드, 인쇄된 문구류)을 흑백으로 평면 배치한 사진. 선명한 탑다운 방식의 편집 디자인 사진으로, 흑백 이미지만 사용."
4. 프로젝트_2 (측면 1:1): "[분야]와 관련된 흑백 미니멀리즘 정물화(예: 영화 슬레이트, 축소 모형, 스타일링된 제품), 영화 스튜디오 조명, 선명한 그림자, 흑백만 사용."
5. 프로젝트_3 (측면 1:1): "흑백 에디토리얼 라이프스타일 사진, [분야]와 관련된 최소한의 스타일링 장면, 고급 잡지 미학, 흑백 사진만 사용."
6. 특징 (화면 비율 16:9): "[분야]와 관련된 넓은 흑백 추상 구도, 극적인 원근감, 분위기 있는 흑백 사진, 무채색."
여섯 개의 URL을 모두 확보했으면 각 URL에 슬롯 이름을 지정하고 3단계로 진행하세요.
3단계 — 웹페이지를 구축합니다.
generateWebpage 함수를 호출할 때 as_artifact: true 옵션을 사용하세요. 아래의 모든 내용을 그대로 포함하는 하나의 상세 지침 프롬프트를 전달해야 합니다. generateWebpage 함수를 실행하는 에이전트는 이 프롬프트를 정확히 따라야 합니다.
--- 웹페이지 프롬프트 시작 ---
세련된 흑백 편집 스타일의 긴 스크롤형 포트폴리오 웹사이트를 제작하세요. 엄격한 시각적 일관성을 유지해야 하며, 절대 벗어나서는 안 됩니다.
팔레트 (독점 색상 - 다른 색상은 없습니다):
- 흰색 배경: #FFFFFF
- 검정 잉크 및 텍스트: #000000
- 어두운 부분 중 한 곳에는 거의 검은색에 가까운 색상(#0A0A0A)을 사용할 수 있습니다.
- 안전망으로 가져온 자산이 엄격하게 흑백으로 유지되도록 모든 에 CSS `filter: grayscale(1) contrast(1.02)`를 적용합니다.
타이포그래피:
- 표시: Google Font 'Fraunces' (굵기 300 및 700, opsz 144 사용). 강조할 핵심 단어에는 이탤릭체 변형을 사용할 수 있습니다.
- 본문: Google Font 'Inter' (굵기 400, 500). 본문 너비 16–18px, 줄 간격 약 1.6.
- 헤드라인 크기가 너무 큽니다: clamp(56px, 12vw, 180px). 디스플레이에서 -0.02em의 트래킹이 발생합니다.
- 네비게이션, 서비스 태그 및 푸터 링크에 소문자(`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`)를 적용합니다.
레이아웃 리듬:
- 섹션 세로 패딩: clamp(80px, 12vh, 200px).
- 컨테이너 최대 너비: 1280px, 측면 여백 clamp(24px, 6vw, 96px).
- 여백을 충분히 확보하세요. 너무 빽빽하게 채우지 마세요.
상호 작용:
- 스크롤 시 배경이 은은하게 흐려지는 고정형 상단 내비게이션.
- 알약 버튼: 1px 솔리드 #000, 투명 채우기, 테두리 반경: 9999px, 패딩 14px 28px. 마우스 오버 시 배경색 #000 + 색상 #FFF로 반전, 200ms 이징.
- 스크롤에 따라 은은하게 밝아지는 페이드업 효과와 각 주요 블록에 24px의 이동 효과 적용 (교차점 관찰자).
- 서비스 행: 마우스 오버 시 텍스트와 화살표가 오른쪽으로 약 12px씩 슬라이드되고, 200ms의 지연 시간이 적용됩니다.
반응형:
- 768px 미만: 헤드라인은 약 64~88px로 축소되고, 2단 그리드는 1단으로 축소되며, 이미지는 여백 내에서 전체 화면으로 유지됩니다.
목차 (이 순서대로):
1. 내비게이션(고정): 스튜디오 이름이 왼쪽 상단에 소문자로 표시되고, '함께 일해요' 버튼이 오른쪽 상단에 있습니다.
2. HERO (전체 흰색): 사용자 태그라인을 두 줄로 나누어 표시합니다. 첫 번째 줄은 Fraunces 이탤릭체, 두 번째 줄은 Fraunces 일반체로 작성합니다. 글자 크기는 매우 크게 합니다. 선택 사항으로 오른쪽 하단에 작은 흑백 강조 이미지를 띄울 수 있습니다(여기서는 HERO 이미지를 작게 사용하거나 다음 섹션에 HERO 이미지를 사용할 수 있습니다). 하단에 은은한 스크롤 표시를 추가합니다.
3. 소개: Fraunces 700 서체로 '[스튜디오] 소개' 제목을 넣습니다. 6단 그리드 형식으로, 소개 글은 왼쪽(1~3열), 4:3 비율의 소개 이미지는 오른쪽(4~6열)에 배치합니다. 짧은 단락 두 개를 포함합니다.
4. 섹션 제목: Fraunces 700의 '우리의 업무', 대규모.
5. 사례 연구 1: 프로젝트 이름(매우 큰 Fraunces 글꼴 사용), 서비스 태그 행은 소문자 대문자(중간 점 · 또는 공백으로 구분)로 표시됩니다. 이름 아래에는 전체 너비의 프로젝트 이미지(project_1을 1:1 비율로 자르고 16:9 비율로 조정)가 표시됩니다. 이미지 아래에는 두 열로 된 그리드가 있습니다. 왼쪽 열에는 크게 표시된 숫자 '01'(Fraunces 300, clamp(100px, 18vw, 220px)), 소문자 대문자로 된 레이블 '배경', 그리고 약 30단어 분량의 본문이 표시됩니다. 오른쪽 열은 왼쪽 열과 동일하게 '02'와 '솔루션'이 표시됩니다.
6. 사례 연구 2: CS1과 동일한 구조이지만 project_2 이미지를 사용합니다. 선택적으로 이미지를 반전시켜 연한 흰색 띠 위에 배치할 수 있습니다. 색상은 팔레트 내에서만 사용해야 합니다.
7. 사례 연구 3: 동일한 구조, project_3 이미지 사용.
8. 특징 영역: 전체 화면 가로 이미지(16:9 특징 영역 슬롯 사용). 텍스트 오버레이 없음.
9. 우리가 하는 일: Fraunces 700 서체로 '우리가 하는 일'이라는 제목을 표시합니다. 아래에는 6개의 서비스 태그가 세로로 나열됩니다. 각 행은 다음과 같습니다. 위쪽에는 1px 두께의 가는 선(#000) 구분선이 있고, 왼쪽에는 Fraunces ~clamp(36px, 6vw, 80px) 서체로 서비스 이름이 표시되며, 오른쪽에는 '→' 화살표가 있습니다. 마우스 커서는 포인터 모양이며, 마우스 커서를 올리면 오른쪽으로 이동합니다.
10. CTA: 전체 화면 어두운 영역, 배경색 #000. "Massive Fraunces" 헤드라인은 #FFF 색상으로 가운데 정렬하고, 닫는 CTA 태그라인을 사용합니다. 패딩은 clamp(120px, 20vh, 240px)로 설정합니다. "Work with us" 버튼은 헤드라인 아래에 배치합니다(흰색 테두리, 투명 채우기, 마우스 오버 시 흰색 배경에 검은색 텍스트로 반전).
11. 푸터: 흰색 배경, 소문자 그로테스크체. 왼쪽에 스튜디오 이름, 오른쪽에 링크('이용 약관 및 지원', '개인정보 보호정책'). 아주 가는 상단 테두리(#000, 1px). 두 번째 줄에 아주 작은 저작권 표시.
이미지 — 아래 데이터 섹션에 제공된 URL을 해당 슬롯에 삽입합니다. 모든 에 object-fit: cover 및 grayscale 안전 필터를 적용합니다. 추가적인 장식 이미지를 넣지 마십시오.
데이터 — 다음 내용을 페이지에 입력하세요:
- studio_name: <1단계에서 지정한 스튜디오 이름>
- 태그라인: <1단계에서 작성한 두 줄짜리 태그라인, '/' 마커로 두 줄을 구분합니다>
- about_copy: <1단계의 소개 단락>
- case_studies: 1단계에서 가져온 세 가지 요소({ 이름, 태그[], 배경, 해결책 })로 구성된 배열
- 서비스: 1단계에서 가져온 6개의 서비스 태그 문자열 배열
- cta_tagline: <1단계의 마무리 CTA>
- 이미지: 2단계에서 가져온 { hero, about, project_1, project_2, project_3, feature }
- footer_links: ['이용 약관 및 지원', '개인정보 보호정책']
--- 웹페이지 프롬프트 종료 ---
generateWebpage 함수를 호출할 때 as_artifact: true를 전달하세요. 함수가 반환되면 사용자가 선호하는 언어로 한 줄 요약 정보를 제공하고, 이미지 교체, 텍스트 변경 또는 프로젝트 이름 변경을 요청할 수 있음을 알려주세요.
설명
세련된 흑백 디자인의 포트폴리오 웹사이트를 제작하세요. 순수한 흑백 색상, 큼직한 세리프체 제목, 번호가 매겨진 사례 연구, 넉넉한 여백이 특징입니다. 이미지를 제공하지 않을 경우, 조화로운 흑백 이미지 6개가 자동으로 생성됩니다.
이 스킬을 추천하는 이유
이 스킬은 디자인 스튜디오나 에이전시에 적합한 고급스러운 흑백 웹 포트폴리오를 제작합니다. 편집 스타일과 미니멀리즘 디자인이 세련되고 전문적인 분위기를 연출합니다.
세련된 흑백 포트폴리오 사이트
Best for design studio, branding agency and etc.
지시사항
1단계 — 브랜드 확정 및 콘텐츠 초안 작성 (최소한의 요청만 필요).
나중에 필요할 지연 로드 도구를 먼저 로드합니다. 2단계와 3단계 전에 generateImage 및 generateWebpage에 대한 toolSearch를 호출하여 준비합니다.
그런 다음 사용자의 메시지와 모든 @참조를 스캔하여 브랜드/스튜디오 이름, 브랜드의 주요 사업 분야, 슬로건, 프로젝트 이름, 서비스 목록, 업로드/참조된 이미지 등을 확인합니다(이러한 정보는 2단계에서 추적해야 하며, 해당 정보가 차지하는 슬롯은 다시 생성하지 마십시오).
질문 규칙 (간단하게 질문하세요. 사용자는 간결한 상호작용을 선호합니다):
- 브랜드 이름과 브랜드 핵심 내용이 모두 누락된 경우, 두 개의 질문을 일괄적으로 askUserQuestion 함수에 한 번만 호출하세요.
Q1 "스튜디오/브랜드 이름은?" - 'StudioNoir', 'Form & Field', 'Atelier 09', 'Object / Subject' 등의 옵션이 있습니다.
Q2 "브랜드는 무엇을 하는 곳인가요?" — '디자인 에이전시', '사진 스튜디오', '건축 회사', '패션 브랜드', '개인 포트폴리오' 등의 선택지.
- 만약 하나만 빠져 있다면, 그 하나만 물어보세요.
- 사용자의 메시지에 두 가지 모두 포함되어 있다면, 아무것도 묻지 말고 바로 진행하세요.
브랜드 이름과 핵심 콘셉트가 정해지면, 더 이상 질문 없이 나머지는 직접 작성하세요. 어조는 편집 스타일처럼 자신감 있고 간결하며 고급스러워야 합니다. 간결한 문구를 사용하세요. 이 스타일은 장황함보다는 여백을 통해 숨 쉬는 듯한 느낌을 줍니다.
초안:
- 태그라인: 'Design / the future', 'Frame / the world', 'Build / the lasting', 'Make / it last'처럼 하나의 문구처럼 읽히는 짧은 두 줄로 구성합니다. 각 줄은 1~2단어로 하고, 줄 바꿈은 세리프 이탤릭체와 세리프 일반체를 함께 사용하여 구분합니다.
- 소개글 작성 요령: 약 80단어, 짧은 단락 두 개 분량. 설립 연도(예: '80년대 이후'), 주요 서비스 몇 가지, 그리고 글로벌 고객 및 업계 수상 경력을 언급하세요.
- 사례 연구 3개. 각 사례 연구에 대해 다음 내용을 포함하세요: 주제에 맞는 독창적인 프로젝트 이름 (디자인 에이전시의 경우 'Schematiq', 'Commercial Co.', 'Sprig & Sky'와 같은 이름을 재사용하고, 다른 분야의 경우 유사한 느낌의 이름을 선택하세요), 1~2개의 서비스 태그, 약 30단어 분량의 배경 설명, 약 30단어 분량의 해결책 설명.
- 핵심 분야와 관련된 6개의 서비스 태그 (기본값: 브랜드 활성화, 통합 마케팅, 웹사이트 개발, 비디오 제작, 브랜드 아이덴티티, 브랜드 전략 - 에이전시 외 분야에 맞게 조정).
- 마무리 CTA 슬로건 (한 줄, 약 10~14단어), 예: '브랜드를 한 단계 끌어올리고 역사에 발자취를 남기세요.'
- 바닥글 항목: 스튜디오 이름, '이용 약관 및 지원', '개인정보 보호정책'.
3단계를 위해 모든 콘텐츠를 메모리에 저장하십시오. 아직 generateWebpage를 호출하지 마십시오.
2단계 — 서로 일관성 있는 흑백 이미지 6개를 정확히 조합합니다.
슬롯 맵: 영웅, 소개, 프로젝트 1, 프로젝트 2, 프로젝트 3, 기능.
A) 사용자가 이미 이미지를 제공한 경우(업로드된 이미지, @references, 메시지에 포함된 URL 등), 제공 순서대로 슬롯에 이미지를 할당하고 해당 슬롯에 대한 이미지 생성은 건너뜁니다. 나머지 슬롯에 대해서만 이미지를 생성합니다.
B) 빈 슬롯마다 generateImage 함수를 호출하십시오. 가능하면 하나의 툴 배치에서 이 함수들을 병렬로 실행하십시오.
모든 슬롯에 적용되는 협상 불가능한 이미지 스타일:
- 순수 흑백 사진만 제공합니다. 색조, 세피아, 듀오톤을 일절 사용하지 않습니다. 에디토리얼/영화/고급 잡지 수준의 품질을 자랑합니다. 6개 페이지 모두 일관된 명암과 입자감을 유지하며, 레이아웃에 따라 여백을 충분히 활용합니다.
슬롯 프롬프트 템플릿 — [DISCIPLINE]을 1단계에서 정한 브랜드 초점(예: '디자인 에이전시', '사진 스튜디오', '건축 회사')으로, [DISCIPLINE_SUBJECT]를 적절한 주제(예: 디자인: 종이 조각/타이포그래피 클로즈업; 건축: 그림자 기하학; 패션: 실루엣; 사진: 정물)로 대체하세요.
1. 히어로 (16:9 비율): "[분야_주제]를 담은 영화 같은 흑백 사진, 극적인 편집 구성, 세련된 미니멀리즘 흑백 미학, 부드러운 상단 조명, 충분한 여백, 고급 잡지 품질, 무채색, 높은 콘트라스트."
2. 설명 (4:3 비율): "현대적인 [DISCIPLINE] 스튜디오 내부를 담은 흑백 다큐멘터리 사진. 부드러운 자연광이 들어오는 큰 창문, 미니멀한 책상과 도구들, 에디토리얼 리포트 스타일, 흑백 사진, 높은 콘트라스트."
3. 프로젝트_1 (1:1 비율): "깨끗한 흰색 배경 위에 브랜드 아이덴티티 목업(명함, 레터헤드, 인쇄된 문구류)을 흑백으로 평면 배치한 사진. 선명한 탑다운 방식의 편집 디자인 사진으로, 흑백 이미지만 사용."
4. 프로젝트_2 (측면 1:1): "[분야]와 관련된 흑백 미니멀리즘 정물화(예: 영화 슬레이트, 축소 모형, 스타일링된 제품), 영화 스튜디오 조명, 선명한 그림자, 흑백만 사용."
5. 프로젝트_3 (측면 1:1): "흑백 에디토리얼 라이프스타일 사진, [분야]와 관련된 최소한의 스타일링 장면, 고급 잡지 미학, 흑백 사진만 사용."
6. 특징 (화면 비율 16:9): "[분야]와 관련된 넓은 흑백 추상 구도, 극적인 원근감, 분위기 있는 흑백 사진, 무채색."
여섯 개의 URL을 모두 확보했으면 각 URL에 슬롯 이름을 지정하고 3단계로 진행하세요.
3단계 — 웹페이지를 구축합니다.
generateWebpage 함수를 호출할 때 as_artifact: true 옵션을 사용하세요. 아래의 모든 내용을 그대로 포함하는 하나의 상세 지침 프롬프트를 전달해야 합니다. generateWebpage 함수를 실행하는 에이전트는 이 프롬프트를 정확히 따라야 합니다.
--- 웹페이지 프롬프트 시작 ---
세련된 흑백 편집 스타일의 긴 스크롤형 포트폴리오 웹사이트를 제작하세요. 엄격한 시각적 일관성을 유지해야 하며, 절대 벗어나서는 안 됩니다.
팔레트 (독점 색상 - 다른 색상은 없습니다):
- 흰색 배경: #FFFFFF
- 검정 잉크 및 텍스트: #000000
- 어두운 부분 중 한 곳에는 거의 검은색에 가까운 색상(#0A0A0A)을 사용할 수 있습니다.
- 안전망으로 가져온 자산이 엄격하게 흑백으로 유지되도록 모든 에 CSS `filter: grayscale(1) contrast(1.02)`를 적용합니다.
타이포그래피:
- 표시: Google Font 'Fraunces' (굵기 300 및 700, opsz 144 사용). 강조할 핵심 단어에는 이탤릭체 변형을 사용할 수 있습니다.
- 본문: Google Font 'Inter' (굵기 400, 500). 본문 너비 16–18px, 줄 간격 약 1.6.
- 헤드라인 크기가 너무 큽니다: clamp(56px, 12vw, 180px). 디스플레이에서 -0.02em의 트래킹이 발생합니다.
- 네비게이션, 서비스 태그 및 푸터 링크에 소문자(`text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px`)를 적용합니다.
레이아웃 리듬:
- 섹션 세로 패딩: clamp(80px, 12vh, 200px).
- 컨테이너 최대 너비: 1280px, 측면 여백 clamp(24px, 6vw, 96px).
- 여백을 충분히 확보하세요. 너무 빽빽하게 채우지 마세요.
상호 작용:
- 스크롤 시 배경이 은은하게 흐려지는 고정형 상단 내비게이션.
- 알약 버튼: 1px 솔리드 #000, 투명 채우기, 테두리 반경: 9999px, 패딩 14px 28px. 마우스 오버 시 배경색 #000 + 색상 #FFF로 반전, 200ms 이징.
- 스크롤에 따라 은은하게 밝아지는 페이드업 효과와 각 주요 블록에 24px의 이동 효과 적용 (교차점 관찰자).
- 서비스 행: 마우스 오버 시 텍스트와 화살표가 오른쪽으로 약 12px씩 슬라이드되고, 200ms의 지연 시간이 적용됩니다.
반응형:
- 768px 미만: 헤드라인은 약 64~88px로 축소되고, 2단 그리드는 1단으로 축소되며, 이미지는 여백 내에서 전체 화면으로 유지됩니다.
목차 (이 순서대로):
1. 내비게이션(고정): 스튜디오 이름이 왼쪽 상단에 소문자로 표시되고, '함께 일해요' 버튼이 오른쪽 상단에 있습니다.
2. HERO (전체 흰색): 사용자 태그라인을 두 줄로 나누어 표시합니다. 첫 번째 줄은 Fraunces 이탤릭체, 두 번째 줄은 Fraunces 일반체로 작성합니다. 글자 크기는 매우 크게 합니다. 선택 사항으로 오른쪽 하단에 작은 흑백 강조 이미지를 띄울 수 있습니다(여기서는 HERO 이미지를 작게 사용하거나 다음 섹션에 HERO 이미지를 사용할 수 있습니다). 하단에 은은한 스크롤 표시를 추가합니다.
3. 소개: Fraunces 700 서체로 '[스튜디오] 소개' 제목을 넣습니다. 6단 그리드 형식으로, 소개 글은 왼쪽(1~3열), 4:3 비율의 소개 이미지는 오른쪽(4~6열)에 배치합니다. 짧은 단락 두 개를 포함합니다.
4. 섹션 제목: Fraunces 700의 '우리의 업무', 대규모.
5. 사례 연구 1: 프로젝트 이름(매우 큰 Fraunces 글꼴 사용), 서비스 태그 행은 소문자 대문자(중간 점 · 또는 공백으로 구분)로 표시됩니다. 이름 아래에는 전체 너비의 프로젝트 이미지(project_1을 1:1 비율로 자르고 16:9 비율로 조정)가 표시됩니다. 이미지 아래에는 두 열로 된 그리드가 있습니다. 왼쪽 열에는 크게 표시된 숫자 '01'(Fraunces 300, clamp(100px, 18vw, 220px)), 소문자 대문자로 된 레이블 '배경', 그리고 약 30단어 분량의 본문이 표시됩니다. 오른쪽 열은 왼쪽 열과 동일하게 '02'와 '솔루션'이 표시됩니다.
6. 사례 연구 2: CS1과 동일한 구조이지만 project_2 이미지를 사용합니다. 선택적으로 이미지를 반전시켜 연한 흰색 띠 위에 배치할 수 있습니다. 색상은 팔레트 내에서만 사용해야 합니다.
7. 사례 연구 3: 동일한 구조, project_3 이미지 사용.
8. 특징 영역: 전체 화면 가로 이미지(16:9 특징 영역 슬롯 사용). 텍스트 오버레이 없음.
9. 우리가 하는 일: Fraunces 700 서체로 '우리가 하는 일'이라는 제목을 표시합니다. 아래에는 6개의 서비스 태그가 세로로 나열됩니다. 각 행은 다음과 같습니다. 위쪽에는 1px 두께의 가는 선(#000) 구분선이 있고, 왼쪽에는 Fraunces ~clamp(36px, 6vw, 80px) 서체로 서비스 이름이 표시되며, 오른쪽에는 '→' 화살표가 있습니다. 마우스 커서는 포인터 모양이며, 마우스 커서를 올리면 오른쪽으로 이동합니다.
10. CTA: 전체 화면 어두운 영역, 배경색 #000. "Massive Fraunces" 헤드라인은 #FFF 색상으로 가운데 정렬하고, 닫는 CTA 태그라인을 사용합니다. 패딩은 clamp(120px, 20vh, 240px)로 설정합니다. "Work with us" 버튼은 헤드라인 아래에 배치합니다(흰색 테두리, 투명 채우기, 마우스 오버 시 흰색 배경에 검은색 텍스트로 반전).
11. 푸터: 흰색 배경, 소문자 그로테스크체. 왼쪽에 스튜디오 이름, 오른쪽에 링크('이용 약관 및 지원', '개인정보 보호정책'). 아주 가는 상단 테두리(#000, 1px). 두 번째 줄에 아주 작은 저작권 표시.
이미지 — 아래 데이터 섹션에 제공된 URL을 해당 슬롯에 삽입합니다. 모든 에 object-fit: cover 및 grayscale 안전 필터를 적용합니다. 추가적인 장식 이미지를 넣지 마십시오.
데이터 — 다음 내용을 페이지에 입력하세요:
- studio_name: <1단계에서 지정한 스튜디오 이름>
- 태그라인: <1단계에서 작성한 두 줄짜리 태그라인, '/' 마커로 두 줄을 구분합니다>
- about_copy: <1단계의 소개 단락>
- case_studies: 1단계에서 가져온 세 가지 요소({ 이름, 태그[], 배경, 해결책 })로 구성된 배열
- 서비스: 1단계에서 가져온 6개의 서비스 태그 문자열 배열
- cta_tagline: <1단계의 마무리 CTA>
- 이미지: 2단계에서 가져온 { hero, about, project_1, project_2, project_3, feature }
- footer_links: ['이용 약관 및 지원', '개인정보 보호정책']
--- 웹페이지 프롬프트 종료 ---
generateWebpage 함수를 호출할 때 as_artifact: true를 전달하세요. 함수가 반환되면 사용자가 선호하는 언어로 한 줄 요약 정보를 제공하고, 이미지 교체, 텍스트 변경 또는 프로젝트 이름 변경을 요청할 수 있음을 알려주세요.
설명
세련된 흑백 디자인의 포트폴리오 웹사이트를 제작하세요. 순수한 흑백 색상, 큼직한 세리프체 제목, 번호가 매겨진 사례 연구, 넉넉한 여백이 특징입니다. 이미지를 제공하지 않을 경우, 조화로운 흑백 이미지 6개가 자동으로 생성됩니다.
이 스킬을 추천하는 이유
이 스킬은 디자인 스튜디오나 에이전시에 적합한 고급스러운 흑백 웹 포트폴리오를 제작합니다. 편집 스타일과 미니멀리즘 디자인이 세련되고 전문적인 분위기를 연출합니다.
다음으로 즐겨 쓸 스킬을 찾아보세요
연구, 창작, 일상 업무에 유용한 엄선된 AI 스킬을 더 탐색해 보세요.