소개
시도하고자 했던 것과 그 이유를 알려주세요.
제가 머릿속에서 생각한 것을 최대한 비슷하게 (또는 발전된 방향으로) 만들기 위한 수단으로 "다양한 ai tool"을 활용하고 싶습니다. 제가 익숙하지 않은 부분을 ai가 빠르게 도와줄 수 있다면 보다 많은 생산적인 활동을 할 수 있으리라 기대하기 때문입니다.
이번 사례에서는 막연하게 머릿속으로 구상하던 것들을 Claude와 ChatGPT를 통해 만들고, Genspark ai slide에 삽입하는 것을 시도했고,
진행과정을 Obsidian에 기록하면서 사례를 진행했습니다.
.
.
초기구상-1 : 전체발표내용 목업
1. Intro : 간단한 회사소개 (1~2분)
2. Project : 진행했던 1~2개 프로젝트 소개 (프로세스, 결과물, 에피소드 중 간단히 2~3분)
3. Goal : 회사가 추구하는 철학이나 지향점에 대해 에피소드 형태로 소개 (2~3분)
.
초기구상-2 : Intro page에 대한 아이디어
먼저 표현방식을 어떻게 할까? 무엇을 전달할 수 있을까? 고민했습니다.
처음 만나게 되는 클라이언트에게 '페이퍼비 건축사사무소'에 대해 소개하는 슬라이드를 구상하게 되면서, "첫 intro page를 어떻게 구성할까?" 생각하다가 문득 '옵시디언의 그래프뷰' 같은 느낌으로 만들어보면 어떨까? 하는 생각이 떠올랐습니다.
옵시디언을 막 시작해서 관심이 있기도 하고, 여러 개의 노드들이 잔잔하게 움직이며 인터렉티브한 느낌이 '한 가지로 규정'되지 않고, '페이퍼비가 다양한 역할을 수행한다는 것'을 잘 표현할 수 있다고 생각했습니다.
.
초기구상-3 : 3가지 도구를 통한 실제화
젠스파크, ChatGPT, Claude 3가지 도구를 이용해서 Intro 페이지를 구성해 보았습니다.
처음에는 완공된 건물사진을 노드형태로 작게 만들어보려고 했습니다. 하지만, 잘 적용되지 않아 Obsidian과 같은 형태로 진행했습니다.
같은 키워드를 3가지 도구 모두에 이용했는데, Claude에서 가장 생각에 근접한 내용에 도달했습니다. 다만, Claude의 한도초과 때문에 기다려야 할 때는 ChatGPT나 Genspark를 이용했습니다.
.
.
(위) Claude를 통해 처음 만든 이미지
.
.
진행 방법
어떤 도구를 사용했고, 어떻게 활용하셨나요?
1.사용도구
Claude Sonnet4, Opus4
ChatGPT o4-mini-high
Genspark : AI 슬라이드
.
2.본격적으로 진행하기 전에 구상한 내용
어떻게 생성되도록 할까? 고민을 했습니다.
우선 회사이름이 맨 처음 생성되고, 진행했던 프로젝트의 노드가 하나씩 순차적으로 나타나도록 했습니다.
배경을 검정으로 바꾸고, 모두 나타난 뒤에도 인터렉티브한 움직임이 느껴지도록 프롬프트를 입력했습니다.
(아래) Claude에서 반 영한 내용
**지속되는 인터렉티브 물리**:
- **노드 간 반발력**: 30% 강도로 계속 작동하여 노드들이 겹치지 않음
- **엣지 인력**: 50% 강도로 연결된 노드들을 계속 끌어당김
- **중심 끌림**: 50% 강도로 전체 구조를 중심에 유지
- **댐핑**: 0.96으로 적절한 저항을 제공하여 안정적인 움직임
**인터렉티브한 특징**:
- 마우스로 드래그할 때 노드들이 자연스럽게 반응
- 줌인/줌아웃 시에도 물리 법칙이 계속 적용
- 노드들이 서로 밀어내고 끌어당기는 관계를 유지
- 실시간으로 균형을 찾아가는 살아있는 네트워크
이제 60초가 지나도 네트워크가 완전히 고정되지 않고, 사용자의 상호작용에 반응하며 노드들 간의 물리적 관계를 계속 유지합니다..
3.Intro '1page' 생성 및 구체적인 구상안
3.1 '회사이름' 노드가 중앙에 생성되고, 주변에 '프로젝트' 노드가 생성되도록 함.
3.2 약 15개정도의 노드가 생성된 후 좌측으로 이동.
3.3 '회사이름' 노드에서 우측으로 얇은 선이 연결되면서 'Goal' 노드가 생성됨.
3.4 'Goal' 노드 주변으로 '주요키워드'가 생성되도록 함.
3.5 설명이 필요한 키워드는 색상이 변경되도록 함.
.
4.진행과정
4.1초기 15개 노드 생성 후 "젠스파크에서 Goal 노드 추가" : 계획과 달라서 실패
.
.
4.2 초기 15개 노드 생성 후 "배경색을 전환하고, ChatGPT에서 Goal 노드 추가" : 실패
.
.
4.3 초기 15개 노드 생성 후 "배경색을 전환하고, Claude에서 Goal 노드 추가" : 계획과 유사
.
.
결과와 배운 점
앞으로의 계획이 있다면 들려주세요.
1.이번 사례에서 Intro 1page를 html형식으로 만들었는데, Claude와 ChatGPT를 통해 생각하는 것을 실제 구현할 수 있다는 것을 느꼈고, Genspark에서는 html형식도 불러와 슬라이드로 만들 수 있다는 것도 알게 되었습니다.
2.다음번에는 '진행했던 프로젝트'와 '페이퍼비의 지향점'을 소개할 수 있는 사례를 슬라이드 1~2 page로 추가해보려고 합니다.
3.시행착오 : 주로 Claude를 통해 html을 수정하는 방식으로 슬라이드를 만들었는데, 작업하면서 처음 1분간의 애니메이션을 중단하고, 이후 과정을 테스트했더니, 이전 과정이 멈추고, 이후 과정만 애니메이션이 형성됨.
4.개선방향 : 진행과정을 Obsidian에 잘 기록해서, 기존 작업과정이 반복되는 것을 최소화하려고 합니다.
.
.
도움 받은 글 (옵션)
17기 발표전달력 스터디에서 느낀 점들이 생각을 확장하는데 도움이 되었습니다.
