Gemini로 인터랙티브 타이포그래피 웹사이트까지
만들 수 있다는 거 알고 있었어? 👀
마우스 움직임에 따라 글자가 흩어지고, 다시 원래 자리로
돌아오는 키네틱 타이포그래피 사이트를 만들어 봤어!
코드를 직접 작성하지 않고 Gemini에 원하는
디자인과 움직임을 설명해서 구현한 웹사이트야.
✔ 마우스 움직임에 반응하는 타이포그래피
✔ 자연스럽게 돌아오는 애니메이션
✔ 원하는 문구로 자유롭게 변경
✔ 글자 크기·반응 강도 조절
직접 사이트에 접속해서 원하는 문구를 입력하고
인터랙션을 체험해 볼 수 있어!
🔗 체험 사이트: https://t.co/NI0X1bKXTF
📌 직접 만들어 보고 싶은 사람들을 위해 Gemini 프롬프트는 타래에 남겨둘게!
#Gemini #제미나이 #시각디자인 #인터랙티브디자인 #키네틱타이포그래피
💜 이런 인터랙티브 웹사이트, 직접 만들어 보고 싶다면?
Gemini로 아이디어 구상부터
코드 생성, 인터랙션 구현까지 도전해 봐!
대학생이라면 Gemini Plus 12개월 무료 혜택으로 다양한
AI 제작 기능을 활용할 수 있어. 400GB 저장공간 혜택까지!
📅 12월 31일까지 신청 가능
🔗 Sign up: https://t.co/Ul7fPzxxkZ
Gemini로 인터랙티브 타이포그래피 웹사이트까지
만들 수 있다는 거 알고 있었어? 👀
마우스 움직임에 따라 글자가 흩어지고, 다시 원래 자리로
돌아오는 키네틱 타이포그래피 사이트를 만들어 봤어!
코드를 직접 작성하지 않고 Gemini에 원하는
디자인과 움직임을 설명해서 구현한 웹사이트야.
✔ 마우스 움직임에 반응하는 타이포그래피
✔ 자연스럽게 돌아오는 애니메이션
✔ 원하는 문구로 자유롭게 변경
✔ 글자 크기·반응 강도 조절
직접 사이트에 접속해서 원하는 문구를 입력하고
인터랙션을 체험해 볼 수 있어!
🔗 체험 사이트: https://t.co/NI0X1bKXTF
📌 직접 만들어 보고 싶은 사람들을 위해 Gemini 프롬프트는 타래에 남겨둘게!
#Gemini #제미나이 #시각디자인 #인터랙티브디자인 #키네틱타이포그래피
HTML, CSS, JavaScript를 사용해 마우스에 반응하는 인터랙티브 키네틱 타이포그래피 웹사이트를 만들어줘.
[디자인]
- 배경은 검은색, 글자는 흰색
- 화면 중앙에 "DON'T TOUCH ME"라는 커다란 영문 타이포그래피 배치
- 실험적인 그래픽 디자인 포트폴리오 같은 미니멀한 스타일
- 굵은 산세리프 폰트 사용
[인터랙션]
1. 마우스가 글자에 가까워지면 해당 글자가 마우스 반대 방향으로 밀려나게 해줘.
2. 글자마다 독립적으로 움직이게 해줘.
3. 마우스가 멀어지면 스프링 애니메이션처럼 부드럽게 원래 위치로 돌아오게 해줘.
4. 글자 간 충돌과 움직임이 최대한 자연스럽게 보이게 해줘.
5. 마우스를 빠르게 움직이면 글자가 더 역동적으로 반응하게 해줘.
[추가 기능]
- 사용자가 문구를 직접 입력해 변경할 수 있는 입력창
- 글자 크기, 반응 범위, 움직임 강도를 조절하는 슬라이더
- 모바일에서는 터치에 반응
- 반응형 레이아웃
[구현 조건]
- 외부 라이브러리 없이 하나의 HTML 파일로 실행 가능하게 만들어줘.
- CSS와 JavaScript를 HTML에 포함해줘.
- 완성된 전체 코드를 제공하고 실행 방법도 설명해줘.
디자인과 학생들아,
디자인은 다 했는데 왜 이렇게 만들었냐고
물어보면 갑자기 말문 막히는 사람? 🫠
분명 나름대로 생각해서 만든 건데
“왜 이 색을 썼나요?”
“이 레이아웃을 선택한 이유는요?”
“이 디자인의 콘셉트가 뭔가요?”
사실 이런 질문 받으면
그냥… 예뻐서요… 하고 싶음..
그럴 때 제미나이에
완성한 디자인 이미지 넣고 이렇게 물어봐.
✔ 색상 선택의 시각적 효과 분석
✔ 레이아웃과 정보 전달 방식 설명
✔ 타이포그래피의 역할 정리
✔ 발표용 디자인 설명문 작성
단, AI가 분석한 효과가 실제 내 제작 의도와
같지는 않을 수 있으니까 최종 설명은
직접 확인하기!
📌 복붙용 프롬프트는 타래에 ⬇️
#디자인과 #시각디자인 #디자인발표 #제미나이 #Gemini #대학생 #꿀팁
디자인과 학생들아,
디자인은 다 했는데 왜 이렇게 만들었냐고
물어보면 갑자기 말문 막히는 사람? 🫠
분명 나름대로 생각해서 만든 건데
“왜 이 색을 썼나요?”
“이 레이아웃을 선택한 이유는요?”
“이 디자인의 콘셉트가 뭔가요?”
사실 이런 질문 받으면
그냥… 예뻐서요… 하고 싶음..
그럴 때 제미나이에
완성한 디자인 이미지 넣고 이렇게 물어봐.
✔ 색상 선택의 시각적 효과 분석
✔ 레이아웃과 정보 전달 방식 설명
✔ 타이포그래피의 역할 정리
✔ 발표용 디자인 설명문 작성
단, AI가 분석한 효과가 실제 내 제작 의도와
같지는 않을 수 있으니까 최종 설명은
직접 확인하기!
📌 복붙용 프롬프트는 타래에 ⬇️
#디자인과 #시각디자인 #디자인발표 #제미나이 #Gemini #대학생 #꿀팁
“너는 시각디자인 전공 교수이자 디자인 크리틱 전문가야.
첨부한 디자인 이미지를 분석해서 다음 내용을 정리해 줘.
1. 디자인의 핵심 콘셉트와 전달 메시지
2. 색상 선택이 주는 인상과 효과
3. 타이포그래피와 폰트의 역할
4. 레이아웃과 시각적 위계의 특징
5. 디자인 요소들이 콘셉트와 연결되는 방식
6. 교수님 앞에서 설명할 수 있는 1분 발표 대본
7. 예상 질문 5개와 답변 예시
이미지에서 확인할 수 없는 제작 의도는 임의로 단정하지 말고, 나에게 질문해 줘.
전문적인 디자인 용어를 사용하되 대학생이 자연스럽게 발표할 수 있는 문장으로 작성해 줘.”
편집디자인하는 시디과들아,
인디자인에서 글자 하나씩 수정하지 마… 😭📚
잡지나 책 만들 때
숫자, 날짜, 특정 단어마다 서식 바꾸느라 시간 날린 적 있지?
인디자인에는 특정 문자 패턴에
자동으로 서식을 적용하는 GREP 스타일이라는 기능이 있음.
근데 정규표현식이 어려워서 잘 안 쓰게 되잖아…
이럴 때 Gemini한테 원하는 규칙을 설명하고
GREP 패턴을 만들어 달라고 해봐!!
✔ 숫자에만 다른 폰트 적용
✔ 특정 단어 자동 강조
✔ 날짜 형식 자동으로 찾기
✔ 반복되는 텍스트 서식 관리
📌 복붙용 프롬프트 + Gemini 대학생 혜택은 타래에 ⬇️
#대학생 #꿀팁 #편집디자인 #인디자인 #design
편집디자인하는 시디과들아,
인디자인에서 글자 하나씩 수정하지 마… 😭📚
잡지나 책 만들 때
숫자, 날짜, 특정 단어마다 서식 바꾸느라 시간 날린 적 있지?
인디자인에는 특정 문자 패턴에
자동으로 서식을 적용하는 GREP 스타일이라는 기능이 있음.
근데 정규표현식이 어려워서 잘 안 쓰게 되잖아…
이럴 때 Gemini한테 원하는 규칙을 설명하고
GREP 패턴을 만들어 달라고 해봐!!
✔ 숫자에만 다른 폰트 적용
✔ 특정 단어 자동 강조
✔ 날짜 형식 자동으로 찾기
✔ 반복되는 텍스트 서식 관리
📌 복붙용 프롬프트 + Gemini 대학생 혜택은 타래에 ⬇️
#대학생 #꿀팁 #편집디자인 #인디자인 #design
"너는 Adobe InDesign 편집디자인 전문가야.
인디자인 GREP 스타일에서 사용할 정규표현식을 만들어 줘.
목표: [예: 본문에서 네 자리 연도만 찾아 별도 문자 스타일 적용]
사용할 GREP 정규표현식
각 기호의 의미
인디자인에서 설정하는 순서
실제 적용 예시
주의해야 할 예외 사례
인디자인에서 지원하는 문법을 기준으로 설명해 줘."
💡 생성된 패턴은 실제 문서에 적용하기 전에 테스트해 봐!
디자인 과제하는 대학생들아,
초반 '자료 조사 & 레퍼런스 리서치' 하다가
밤샌 적 있지… 🫠
'타겟 페인포인트가 뭐예요?'
'경쟁 브랜드랑 차별점이 안 보여요'
'컨셉의 논리적 근거가 부족해요'
구글링 탭 50개 띄워놓고 막막할 때,
제미나이 [Deep Research] 켜봐.
주제만 던지면 수십 개 사이트·트렌드 뒤져서
출처 달린 보고서를 몇 분 만에 써주거든.
✔ 타겟 유저의 찐 불만(페인포인트) 수집
✔ 경쟁 브랜드 10개 비주얼·포지셔닝 비교
✔ 디자인 컨셉의 사회·문화적 근거 정리
✔ 핀터레스트·비핸스 검색 키워드 추출
✔ 리서치 결과 바로 웹페이지·인포그래픽 변환
과제 시간 1/10로 줄여주는
복붙 프롬프트 3개 바로 공유할게 🔖👇
#디자인 #꿀팁 #자료조사 #design #대학생
3️⃣ 작품 기획서 & 크리틱 방어용:
레퍼런스 심층 배경 조사
교수님 크리틱 때 "이 스타일 왜 썼어?" 질문에 논리적으로 대답하고 싶을 때 복붙해.
📋 복붙 프롬프트: "[한국 전통 민화의 현대적 재해석 / Y2K 사이버펑크 인터페이스]와 관련된 국내외 대표 디자인 사례, 전시, 아티스트 레퍼런스를 조사해 줘. 이 스타일이 등장한 사회·문화적 배경과 시각적 조형 언어를 분석하고, 내 디자인 작업의 기획 의도(Artist Statement)에 활용할 수 있는 핵심 인사이트 3가지를 정리해 줘."
디자인 과제하는 대학생들아,
초반 '자료 조사 & 레퍼런스 리서치' 하다가
밤샌 적 있지… 🫠
'타겟 페인포인트가 뭐예요?'
'경쟁 브랜드랑 차별점이 안 보여요'
'컨셉의 논리적 근거가 부족해요'
구글링 탭 50개 띄워놓고 막막할 때,
제미나이 [Deep Research] 켜봐.
주제만 던지면 수십 개 사이트·트렌드 뒤져서
출처 달린 보고서를 몇 분 만에 써주거든.
✔ 타겟 유저의 찐 불만(페인포인트) 수집
✔ 경쟁 브랜드 10개 비주얼·포지셔닝 비교
✔ 디자인 컨셉의 사회·문화적 근거 정리
✔ 핀터레스트·비핸스 검색 키워드 추출
✔ 리서치 결과 바로 웹페이지·인포그래픽 변환
과제 시간 1/10로 줄여주는
복붙 프롬프트 3개 바로 공유할게 🔖👇
#디자인 #꿀팁 #자료조사 #design #대학생
2️⃣ 브랜딩·패키징 과제:
경쟁사 비주얼 10개 한 번에 뜯어보기
시장 조사 장표 채울 때 경쟁 브랜드 컬러·폰트·톤앤매너 표로 정리하기 딱 좋아.
📋 복붙 프롬프트: "[국내외 제로 슈거 음료 / 인디 뷰티 브랜드]의 주요 경쟁 브랜드 8~10개를 선정해 비교 분석해 줘. 각 브랜드의 1) 핵심 타겟층 2) 패키지 디자인의 시각적 특징(컬러, 타이포그래피, 그래픽 스타일) 3) 브랜드 스토리텔링 방식을 표로 정리하고, 지금 시장에서 비어 있는 새로운 비주얼 포지셔닝 전략 2가지를 제안해 줘."