스터디 시간에 스터디장님들께서 알려주신 구글의 2가지 기능을 아직 안 해봐서
시도해봅니다.
구글 노트북LM의 슬라이드 생성 기능(wow, 미쳤네요.....)
구글 노트북LM에 가서 deep research 기능으로 'MCP'에 대해서 초보자가 쉽게 이해할 수 있게 자료를 찾아달라고 요청한 후, 나온 결과들을 소스로 심어줍니다.
그리고 나서 옆의 슬라이드 생성을 눌러줍니다.
초보자가 쉽고 재미있게 이해할 수 있도록 만들어달라고 요청했습니다.
나온 슬라이드 품질 보고 깜짝 놀랐습니다.
그간 Claude, Genspark 등의 슬라이드를 보면서
회사 같은 formal한 용도로는 사용하기 어렵겠다라고 느끼고 있었는데
구글의 결과물 보고는 생각이 좀 바뀌었습니다.
어쩌면 앞으로 사람들이 PPT 작업을 안해도 될 것 같다라는 생각이 들었네요.
좀 더 발전하면 PPT 잘 만드는 전략 컨설턴트들 보다 더 잘 만들 수도 있을 것 같다는 생각입니다.
와, 정말 대박이네요. Genspark 걱정될 듯 합니다.
이번에는 Gemini에 새로 들어온 시각적 레이아웃을 사용해봅니다.
이건 뭔가 했더니, 제미나이에게 물어보니
'시각적 레이아웃(Visual Layout)' 기능은 Gemini가 단순히 텍스트나 코드를 나열하는 것을 넘어, 웹페이지, UI 디자인, 프레젠테이션 슬라이드, 대시보드 형태 등을 실제 완성된 화면처럼 렌더링해서 보여주는 기능입니다.
쉽게 말해, "웹사이트 코드를 짜줘"라고 하면 예전에는 코드만 보여줬지만, 이 기능을 쓰면 코드가 실행된 실제 웹사이트 화면을 바로 보여줍니다.
💡 주요 특징
즉각적인 시각화: HTML, CSS, React 등으로 작성된 코드를 채팅창 내에서 바로 렌더링합니다.
구조화된 디자인: 웹사이트, 앱 인터페이스, 보고서 레이아웃 등을 눈으로 보며 확인할 수 있습니다.
상호작용: (경우에 따라) 버튼을 누르거나 탭을 이동하는 등 간단한 인터랙션이 가능한 프로토타입을 만들 수 있습니다.
🚀 사용 방법
사용법은 매우 간단합니다. '도구' 메뉴에서 선택하거나, 프롬프트(명령어)로 "~ 화면을 만들어줘", "~ 레이아웃을 잡아줘"라고 요청하면 됩니다.
[단계별 사용법]
입력창의
+버튼 또는도구를 누릅니다.시각적 레이아웃을 선택합니다 (선택하지 않고 말로 요청해도 Gemini가 판단하여 실행하기도 합니다).원하는 디자인이나 레이아웃을 구체적으로 설명합니다.
🎨 구체적인 활용 예시 (프롬프트)
다음과 같이 입력하여 직접 테스트해 보세요.
1. 웹사이트/앱 UI 디자인
"모던한 느낌의 감성적인 카페 랜딩 페이지를 만들어줘. 메인 배너와 메뉴 소개 섹션이 있었으면 좋겠어."
결과: 실제 웹사이트처럼 사진(플레이스홀더)과 텍스트가 배치된 디자인 화면이 나타납니다.
2. 대시보드 및 데이터 시각화
"지난달 마케팅 성과를 보여주는 관리자 대시보드 레이아웃을 짜줘. 방문자 수 그래프와 주요 지표 카드가 4개 배치된 형태면 돼."
결과: 그래프와 숫자가 정돈된 대시보드 화면이 렌더링 됩니다.
3. 뉴스레터나 이메일 폼
"구독자에게 보낼 주간 뉴스레터 HTML 레이아웃을 만들어줘. 헤더, 본문, 하단 푸터가 깔끔하게 구분되도록 해줘."
결과: 실제 이메일함에서 볼 수 있는 형태의 뉴스레터 디자인이 나옵니다.
4. 간단한 도구 제작
"심플한 디자인의 할 일 목록(To-do List) 앱 화면을 만들어줘. 체크박스와 삭제 버튼이 있어야 해."
✨ 꿀팁
이 기능은 'Labs(실험실)' 버전이므로, 아직 완벽하지 않을 수 있으며 계속 발전 중인 기능입니다.
만 들어진 결과물이 마음에 들면, Gemini에게 "이 디자인의 HTML/CSS 코드를 줘"라고 해서 실제 개발에 활용할 수 있습니다.
그래서 사용해봅니다.
UI 만들어 주는 것은 아직 실험버전이라 좀 오래 걸리고 애매한 부분도 있는 것 같습니다.
그래서 다른 것을 요청해봤습니다.
와, 이것도 새롭습니다.
제시한 것 중에서 한 곳을 눌러보니
구글이 칼갈고 UI 만드는 것도 Gemini에 통합시켜서 제공하는 것 같습니다.
점점 더 흥미로워지네요
스터디장님들께서 알려주신 덕분에 모르던 기능을 2개 익혀봤습니다.
감사합니다. 🙇 🌸
