소개
17기 발표전달력
이번 사례에서는 막연하게 머릿속으로 구상하던 것들을 Claude를 통해 만들고, Genspark ai slide에 삽입하는 것을 시도했고, 진행과정을 Obsidian에 기록하면서 사례를 진행했습니다.
2주차, 3주차는 발표를 위한 슬라이드 작성, 4주차에는 일래븐랩스를 통해 음성을 삽입하는 것을 목표로 하고자 합니다.
.
초기구상-1 : 전체발표내용 목업
1. Intro : 간단한 목차페이지를 애니메이션 방식의 1page로 구성
2. Project : 회사소개 및 진행했던 프로젝트를 15page로 구성
.
초기구상-2 : Intro page에 대한 아이디어
먼저 표현방식을 어떻게 할까? 무엇을 전달할 수 있을까? 고민했습니다.
처음 만나게 되는 클라이언트에게 '페이퍼비 건축사사무소'에 대해 소개하는 슬라이드를 구상했습니다.
첫 intro page를 어떻게 구성할까? 생각하다가 문득 '옵시디언의 그래프뷰' 같은 느낌으로 만들어보면 어떨까? 하는 생각이 떠올랐습니다.
옵시디언을 막 시작해서 관심이 있기도 하고,
여러 개의 노드들이 잔잔하게 움직이며 인터렉티브한 느낌이 '한 가지로 규정'되지 않고, '페이퍼비가 다양한 역할을 수행한다는 것'을 잘 표현할 수 있다고 생각했습니다.
.
.
.
진행 방법
1. 사용도구
Claude Sonnet4, Opus4
ChatGPT : o4-omni-high (Claude 한도에 달했을때만 사용)
Genspark : AI 슬라이드
.
.
.
2. 본격적으로 진행하기 전에 구상한 내용
어떻게 생성되도록 할까? 고민을 했습니다.
우선 회사이름이 맨 처음 생성되고, 진행했던 프로젝트의 노드가 하나씩 순차적으로 나타나도록 했습니다.
배경을 검정으로 바꾸고, 모두 나타난 뒤에도 인터렉티브한 움직임이 느껴지도록 프롬프트를 입력했습니다.
입력했던 프롬프트
나는 Obsidian 그래프뷰와 같이 인터랙티브한 움직임을 구현하고 싶어. 아래 파일을 참고해서, 내가 코드를 발전시킬 수 있도록 도와줘.갤러시와 같은 거대한 스케일에서 첫 노드가 생겨나는 역동적인 이미지로 첫 노드의 생성을 만들어줘.노드가 생성된 후 화면전체가 갤러시와 같은 공간으로 다시 돌아가도록 해줘. 그 중 하나의 점이 빛나는데, 그게 PAPER.B architects라는 처음 생성된 노드야.완성되었습니다! 🌌✨
🌟 새로운 갤럭시 뷰 시퀀스
📋 전체 애니메이션 흐름
공허 (0-2초) → 창세 (2-5초) → 팽창 (5-7초) → 안정화 (7-9초)
노드 순차 생성 (9-36.5초) - 일반 그래프 뷰
갤럭시 전환 (38.5초부터) - 우주적 스케일로 확대
🌌 갤럭시 뷰 특징
나선 은하 구조: 800개의 별들이 나선팔을 형성
천천히 회전: 은하 전체가 우아하게 자전
별빛 반짝임: 각 별이 독립적으로 깜빡임
PAPER.B 특별 표시:
중심에서 가장 밝게 빛나는 흰색 별
맥동하는 글로우 효과
다중 광륜과 플레어 효과
⚡ 자동 줌아웃
갤럭시 뷰 전환 시 자동으로 0.1배 축소
전체 은하계를 조망할 수 있는 시점
이제 노드들이 모두 생성된 후, 마치 허블 망원 경이 후퇴하며 은하계 전체를 보여주는 듯한 장관을 연출합니다! PAPER.B architects는 그 광활한 우주 속에서 가장 밝게 빛나는 별로 남아있어요. 🌟
.
.
PAPER.B architects 노드를 제외한 나머지 노드가 전체 은하계 속으로 사라 지게 해줘. 나선은하구조는 5,000개의 별들로 형성해줘.완성되었습니다! 🌌✨
🌟 업데이트된 갤럭시 뷰
📊 새로운 구성
5,000개의 별들: 더욱 밀도 높고 웅장한 나선은하
노드 변환: PAPER.B를 제외한 14개 노드가 은하 속 별들로 변환
색상 보존: 각 변환된 별들이 원래 노드의 카테 고리 색상 유지
🎨 노드별 변환 색상
주거용 (Y House, H House 등): 🟢 초록색 별
사무용 (WPC, MTCM 등): 🟠 주황색 별
상업용 (Cafe Haegot): 🩷 분홍색 별
연구용 (H Project, N Laboratory): 🟣 보라색 별
도시계획 (마스터플랜들): 🩵 청록색 별
인테리어 (C Cafe): 🧡 연주황색 별
⭐ PAPER.B architects 특별 표시
은하 중심에서 홀로 빛나는 하얀색 초거성
맥동하는 광휘와 다중 광륜 효과
다른 모든 프로젝트들이 그 주위를 도는 별들로 승화
이제 PAPER.B architects는 진정한 건축 우주의 중심별이 되었고, 모든 프로젝트들은 그 주위를 도는 아름다운 별자리가 되었습니다! 🌟🏗️
.
.
.
3.첫 결과영상 : intro page 애니메이션 반영
https://claude.ai/public/artifacts/b3f80e90-8bb3-4b9b-b032-8391db452575
초기 이미지
노드가 생성되는 과정
.
.
.
4.추가페이지 생성 및 연결
노드를 클릭하면 다음 슬라이드로 연결되게 해줘. 현재 내용이 1page 이고, 2page에서 16page까지 추가로 슬라이드를 만들어 줘.
좌측 상단에 영문 타이틀만 작게 표기해줘. 영문타이틀을 누르면 1page로 이돟.
나중에 2~16page에 이미지는 따로 추가할께.1. 노드 클릭 네비게이션
첫 번째 클릭: 노드 정보 표시 + "클릭하여 상세보기 →" 메시지
두 번째 클릭 또는 더블클릭: 해당 프로젝트 페이지로 이동
2. 15개 추가 슬라이드 (Page 2-16)
Page 2: C Cafe Interior (청담동카페 인테리어)
Page 3: B House (부천 상가주택)
Page 4: WPC Headquarters (플리츠미 사옥)
Page 5: Y House (여주 단독주택)
Page 6: MTCM Headquarters (엠티씨엠 사옥)
Page 7: H Project (H사 연구소)
Page 8: Y2 House (용인 단독주택)
Page 9: H House (횡성 단독주택)
Page 10: G House (광주 단독주택)
Page 11: C Masterplan (청라지구 마스터플랜)
Page 12: H Masterplan (히든힐스 마스터플랜)
Page 13: Cafe Haegot (카페해갓)
Page 14: N Laboratory (N사 연구소 및 사옥)
Page 15: M Office (문래동 사옥)
Page 16: About PAPER.B architects (회사 소개)
3. 좌측 상단 영문 타이틀
모든 슬라이드 페이지에 "PAPER.B architects" 영문 타이틀 표시
타이틀 클릭 시 Page 1 (메인 코스믹 그래프)로 복귀
4. 이미지 플레이스홀더
각 프로젝트 페이지에 이미지 추가를 위한 플레이스홀더 준비
"이미지가 추가될 예정입니다" 메시지와 함께 점선 박스 표시
📱 사용 방법:
코스믹 애니메이션 감상 → Page 1에서 애니메이션 완료 대기
노드 클릭 → 프로젝트 정보 확인
재클릭/더블클릭 → 해당 프로젝트 상세 페이지로 이동
좌측 상단 타이틀 클릭 → 언제든 메인 페이지로 복귀
이제 각 프로젝트별 이미지를 추가하실 수 있습니다! 이미지 플레이스홀더 부분에 실제 프로젝트 이미지를 넣어서 완성하시면 됩니다.
.
.
노드 클릭이 잘 안되는데, 다시 한 번 확인해줘.노드 클릭 문제를 해결했습니다! 주요 개선 사항들:
🔧 개선된 사항들:
1. 클릭 감지 범위 확대
클릭 감지 반경을 15px로 확대 (기존 5px)
노드 크기와 상관없이 더 넓은 클릭 영역 제공
2. 애니메이션 단계 확인
인터랙티브 모드에서만 클릭 처리 (
cosmicAnimation.phase === 'interactive')애니메이션 진행 중에는 클릭 무시
3. 디버그 메시지 추가
콘솔에 클릭 이벤트와 페이지 이동 로그 출력
인터랙티브 모드 활성화 시점 확인 가능
4. UI 개선
정보 패널에 더 명확한 안내 문구 추가
"📖 상세보기 →" 버튼과 "노드를 다시 클릭하세요" 안내
버튼에 밑줄 추가로 클릭 가능함을 명시
5. 다중 클릭 옵션
첫 번째 클릭: 노드 정보 표시
두 번째 클릭: 페이지 이동
더블클릭: 즉시 페이지 이동
정보 패널의 "상세보기" 버튼: 클릭으로 페이지 이동
📋 사용법:
애니메이션 완료 대기 (약 10-15초)
콘솔에서 "Interactive mode activated" 메시지 확인
노드 클릭 → 정보 표시
다시 클릭하거나 "상세보기" 버튼 클릭 → 페이지 이동
이제 노드 클릭이 훨씬 더 잘 작동할 것입니다!
.
.
2~16page는 아래 내용을 반영해줘.
1. 이미지는 우측 70%로 설정해줘.
2. PAPER.B architects 텍스트 아래쪽에 타이틀을 표기하는데, 좌측시작점을 맞추고, 행간거리(Y축거리)는 PAPER.B architects의 글씨크기 100%로 반영해줘.첨부된 이미지를 보면 텍스트의 시작 X좌표가 달라. X좌표를 일치하게 해주고, PAPER.B arhictects와 타이틀의 영문간 간격도 글자크기의 50%를 적용해줘. (Y좌표 이격거리)2~16page 타이틀을 2배로 키워줘. PAPER.B architects와 타이틀간 거리는 여전히 넓어, PAPER.B architects 글자의 50%이내로 줄여줘.이미지를 포함하려면 어떤 방법이 있을까?
1. 이미지크기를 일정용량 이하로 줄인다.
2. 구글드라이브 링크를 이용한다.
3. 홈페이지상의 이미지를 이용한다.좋은 질문입니다! 각 방법의 장단점을 설명드리겠습니다.
📸 이미지 포함 방법 비교:
1. 이미지 크기를 일정 용량 이하로 줄인다
✅ 장점:
아티팩트에 직접 포함 가능 (base64 인코딩)
외부 의존성 없음
빠른 로딩
❌ 단점:
화질 저하 불가피
파일 크기 제한 (보통 100KB 이하)
아티팩트 코드가 매우 길어짐
2. 구글드라이브 링크를 이용한다
✅ 장점:
고화질 이미지 사용 가능
쉬운 업로드 및 관리
❌ 단점:
구글드라이브 직접 링크는 보안상 제한이 있음
공유 설정이 복잡함
링크가 변경될 수 있음
3. 홈페이지상의 이미지를 이용한다 ⭐ 추천
✅ 장점:
고화질 이미지 사용 가능
안정적인 URL
관리 용이
❌ 단점:
홈페이지가 있어야 함
CORS 정책에 따라 제한될 수 있음
🎯 가장 실용적인 방법:
3번 홈페이지 이미지 사용이 가장 좋습니다. 다음과 같이 구현할 수 있습니다:
css
#page6 .image-area {
background-image: url('https://your-website.com/images/mtcm-headquarters.jpg');
}.
.
.
5.두번째 결과물 : 총 16page 페이지 연결 반영 및 3개 프로젝트 이미지 삽입
https://claude.ai/public/artifacts/c0b89340-b8eb-4aca-8a2e-b88d111c0f2b
프로젝트 검색기능
페이지 이동
.
.
.
6.Genspark
6-1.Claude에서 작성한 코드를 html형식으로 다운로드하여 젠스파크에 삽입
1. 첨부된 코드를 분석해서 16page 슬라이드를 만들어줘.
2. 혹시 슬라이드 1page에 코드길이가 길어서 적용이 어려울 경우 page를 추가해도 괜찮아. 이 때 슬라이드를 자연스럽게 넘어가도록 구성해줘.
3. 추가로 첨가하지 말고, 꼭 코드에 있는 내용만 그대로 반영해줘.WPC Headquarters 페이지에 이미지를 첨부해줘.
(로컬드라이브에서 이미지 첨부)6.2.젠스파크 링크
https://www.genspark.ai/agents?id=f5fce5ac-f62a-4cc5-9270-41b4b2943a7a
.
.
.
결과와 배운 점
1) 이번 사례에서 Intro 1page를 html형식으로 만들었는데, Claude를 통해 생각하는 것을 실제 구현할 수 있다는 것을 느꼈고, Genspark에서는 html형식도 불러와 슬라이드로 만들 수 있다는 것도 알게 되었습니다.
2) 2주차 사례발표 이후 베스트사례를 준비하면서 intro 페이지 + Project 페이지를 연동하는 것까지 실행해 봤습니다. 다음번에는 각 페이지를 발전시키고, 일레븐랩스를 통해 프로젝트 설명 음성을 삽입해보고 싶습니다.
3) 시행착오 : Claude에서는 삽입된 이미지가 보이지 않았고, Genspark에서는 링크가 연결되지 않았음. 주로 Claude를 통해 html을 수정하는 방식으로 슬라이드를 만들었는데, PPT 또는 keynote에서 만드는 것보다 시간이 많이 소요됨.
