안녕하세요!!!

이번에는 Gemini의 Canvas 기능을 사용하여, 가공의 서비스 기획서 작성부터 웹 페이지 구축까지를 맡겨 그 실력을 검증해 보았습니다.

결론부터 말씀드리면, 「기획(문서)에서 코드 구현으로의 심리스(Seamless)한 이행」과 「부분적인 수정의 간편함」 측면에서 상당히 편리한 도구라고 느꼈습니다. 본 기사에서는 그 구체적인 제작 프로세스와 소감을 전달해 드립니다.

Gemini의 Canvas 기능으로 무엇을 할 수 있는지 궁금하신 분 -
개인 개발의 프로토타입이나 목업(Mockup)을 초고속으로 만들고 싶은 분 -
AI를 사용한 웹 제작(AI Driven Development) 워크플로에 관심이 있는 분 - 프론트엔드는 조금 서툴지만,
직관적으로 예쁜 웹사이트를 만들어 보고 싶은 분

이번에는 테마로, 운동 부족으로 고민하는 엔지니어를 위한 가공의 체육관 공식 웹 페이지를 만들어 보려고 합니다.

갑자기 코드를 쓰게 하는 것이 아니라, 우선 Canvas를 사용하여 체육관 기획서를 작성해 나갑니다.

Canvas 모드를 활성화한 후, 다음 프롬프트를 입력합니다.

가공의 엔지니어 전용 체육관 「Engineer Fitness」의 공식 WEB 페이지를 만들고 싶습니다.
우선 웹 페이지의 기획서를 작성해 주세요.
타겟층은 「운동 부족으로 고민하는 엔지니어」로 하고, 캐치프레이즈, 특징적인 프로그램, 요금 플랜, 기타 웹 페이지에 필요한 정보를 포함해 주세요.

작성된 기획서가 여기 있습니다. 사이트의 목적부터 WEB 페이지의 디자인·구성안에 이르기까지 기획서에 포함해 주었습니다.

Canvas라면 작성된 문서를 직접 편집할 수 있기 때문에, 필요하다면 편집을 가하여 Gemini와 대화(벽치, 壁打ち)하는 것도 가능합니다.

다음으로 작성한 기획서로부터 웹 페이지를 작성해 나갑니다. 앞서 보았던 화면 우측 상단의 「작성」 탭을 클릭하고, 「웹 페이지」 버튼을 클릭해 주세요.

그러면 Canvas가 앞서 작성한 기획서의 정보를 읽어 들여, 자동으로 HTML/CSS/JavaScript 코딩을 시작합니다. 몇 초만 기다리면 오른쪽 패널에 프리뷰(Preview) 화면과 함께 웹 페이지가 완성되었습니다!

기획서에서 정의한 캐치프레이즈나 특징적인 프로그램, 요금 플랜이 반영되어 있습니다. 코드와 프리뷰를 같은 화면에서 볼 수 있어서, 로컬 환경에서 파일을 만들고 브라우저로 확인하는 번거로움을 줄일 수 있다는 점은 큰 장점입니다.

생성된 웹 페이지에 대해 「조금 더 이곳을 바꾸고 싶다」는 부분이 있다면, 코드 탭으로 전환하여 직접 수정하거나, 혹은 Gemini에게 수정을 요청할 수 있습니다.

시험 삼아 다음과 같은 프롬프트를 Gemini에게 던져 보겠습니다.

요금 플랜 부분을 가로 배열 레이아웃으로 변경해 주세요.

변경 사항과 변경 내용과 함께 웹 페이지를 수정해 주었습니다.

또한, 코드 화면에서 특정 코드를 지정하거나, 프리뷰 화면을 범위 선택하여 Gemini에게 질문하는 것도 가능합니다.

나아가 왼쪽 패널 상단의 화살표 버튼을 클릭하면, 변경 전 버전으로 돌아가거나 최신 버전으로 돌아갈 수 있습니다. 변경을 실수해도 안심입니다.

디자인의 미세 조정뿐만 아니라, Canvas에는 더욱 개발하기 쉽게 만들기 위한 편리한 기능들이 갖춰져 있었습니다. 그중 일부를 발췌하여 소개합니다.

코드를 만지다가 JavaScript 등으로 에러가 발생했을 경우, 화면상에 팝업이 표시되며 「에러 수정」이라는 버튼과 「콘솔 표시」라는 버튼이 나타납니다.

「콘솔 표시」를 통해 실제 브라우저의 개발자 도구처럼 에러 내용을 확인할 수 있는 것은 물론, 「에러 수정」 버튼을 클릭 한 번 하는 것만으로, Gemini가 에러 원인을 특정하여 자동으로 코드를 고쳐 줍니다. 수동으로 디버깅(Debugging)하는 수고를 대폭 줄일 수 있었습니다.

더 나아가 화면상의 「Gemini 기능 추가」라는 버튼입니다. 이것을 누르면, 무려 만들고 있는 웹 페이지 자체에 Gemini의 AI를 이용한 기능을 추가할 수 있습니다.

예를 들어 이번 체육관 사이트에 「현재 운동 습관을 입력하면, AI가 최적의 플랜을 제안해 주는」 식의 AI 연동 기능을 간단히 구축할 수 있습니다.

다음은 실행 결과인 웹 화면입니다.

폼에 입력하고 버튼을 클릭하면 다음과 같은 화면이 출력되었습니다. 코드를 확인해 보니, 실제 AI(Gemini API)와 통신하는 처리가 작성되어 있었습니다. 대단합니다.

이번에 기획서 작성부터 웹 페이지 구축까지 Gemini Canvas로 진행해 보며 다음과 같은 소감을 느꼈습니다.

장점

미리보기와 수정 루프가 빠름: 미리보기를 확인하면서 Gemini를 통한 수정이나 직접 코드를 만지는 수정을 유연하게 선택하여 구현할 수 있기 때문에, 프로토타입(Prototype)이나 목업(Mockup) 제작은 상당히 쉽게 할 수 있을 것이라고 생각합니다 -
디버깅 기능: 에러 검지부터 콘솔 확인, 자동 수정까지 Canvas 내에서 완결되기 때문에, 이와 관련된 디버깅(Debugging) 작업도 원활했습니다

과제

• 가끔 미리보기 표시가 약간 늦어질 때가 있음
• 세밀한 디자인 미세 조정은 직접 코드를 다시 쓰는 것이 더 빠른 경우도 있음
• Gemini에 의한 자동 수정 후에 에러가 발생하는 경우도 있음
• 하나의 파일에 모든 코드가 작성되기 때문에, 대규모 개발에는 적합하지 않음

Gemini의 Canvas 기능 덕분에 프론트엔드(Front-end) 구현에 익숙하지 않은 분이라도 직관적으로 웹 페이지를 만들 수 있습니다.

"이런 서비스를 한번 만들어보고 싶다"라는 아이디어가 있는 분들은 꼭 Gemini Canvas로 즐겨보시기 바랍니다!

끝까지 읽어주셔서 감사합니다.