💌 Part2. 프로토타이핑에 최적화된 AI툴들로 업무 시간을 1/10로 줄여봐요! 🌪️

2024. 10. 21.

2024/10/22 화요일

구독하기 | 이전 뉴스레터

📌오늘의 파쓰레터 Summary

✅ 파쓰와 함께 훑는 플랫폼 트렌드 : 오늘은 파쓰와 함께 개발 및 프로토타이핑 단계에서 써볼 만한 업무 생산성 극대화 툴을 알아보아요~!

✅ 파쓰가 전하는 테크 샤라웃 : 여기어때, SK플래닛, 배달의민족의 테크 블로그 소식을 소개합니다!

🔎 파쓰와 함께 훑는 플랫폼 트렌드

💌Part2.바쁘다 바빠! 현대사회, 플랫폼 메이커들의 생산성을 높여주는 AI툴

#생성형AI, #generativeAI

생성형 AI와 함께 하루가 멀다 하고 쏟아지는 AI 툴과 기술들로 인해 인공지능 시대가 본격화되면서 우리의 일상과 업무 방식에도 큰 변화가 일어나고 있어요. 소프트웨어 솔루션 기업 JetBrains의 '개발자 생태계 현황 2023' 보고서에 따르면, 전 세계 개발자의 77%가 Chat GPT를 사용하고 있다고 해요.

생성형 AI를 활용한 애플리케이션뿐만 아니라 파워포인트, 포토샵, 프리미어 프로와 같은 기존의 소프트웨어 프로그램에도 AI 기능들이 계속해서 추가되고 있어요. 이제는 수많은 AI 툴 중에서 나에게 필요한 것을 잘 찾고 이를 활용하여 업무 효율을 높이고 산출물을 더 가치 있게 만드는 것이 중요해진 시대가 된 것 같아요.

지난 기획 및 아이디어 생성 단계에 필요한 AI툴에 이어 오늘은 파쓰와 함께 Part2. 개발 및 프로토타이핑 단계에서 써볼 만한 업무 생산성 극대화 툴을 몇 가지 소개해 드리고자 해요! AI 툴과 함께 여러분의 업무 능력을 한 단계 더 높여보세요!

<JetBrains의 '개발자 생태계 현황 2023' 중 생성형 AI 사용 현황,출처:JetBrain>

개발 및 프로토타이핑 단계 생성형 AI 툴 5가지 톺아보기 ⚙️

✅ 주요 특징 요약

UI/UX 디자인을 위한 생성형 AI툴

1. Uizard

장점: 텍스트 프롬프트로 간단하게 와이어프레임 생성 가능, 스크린샷을 활용한 디자인 벤치마킹 기능 제공
단점: Figma로 작업물 내보내기 불가, 완전히 작동하는 웹사이트/앱 제작은 불가능

2. Scene

장점: AI 비서 '뮤즈'와 함께 서비스 요약 및 단계별 와이어프레임 제작 가능, 여러 디바이스 버전 동시 생성
단점: 브라우저 재접속 시 프롬프트 대화 내용이 사라질 수 있음

프로그래밍을 도와주는 생성형 AI툴

1. Github Copilot

장점: 방대한 오픈소스 코드 학습 기반 자동 완성 기능, 채팅을 통한 코드 관련 질의응답 가능
단점: 제안된 코드를 무비판적으로 적용 시 위험할 수 있음, 유료 서비스

2. Tabnine

장점: 사용자의 코딩 스타일 학습을 통한 개인화된 코드 제안, 다양한 프로그래밍 언어 지원
단점: 프로젝트 규모가 커질수록 성능 저하 발생 가능, Github Copilot 대비 상대적으로 성능이 떨어짐

프로토타입 테스트에 도움을 주는 생성형 AI툴

1. Testim

장점: AI 기반 테스트 자동화 도구, Github Copilot 기능 통합으로 테스트 코드 작성 지원
단점: AI 기능은 테스트 코드 작성 단계에서만 제한적으로 사용 가능, 모바일 테스트 자동화 기능 부족

UI/UX 디자인을 위한 생성형 AI툴🎨

프로덕트의 뼈대를 만들기 위해 필요한 것이 바로 와이어프레임인데요. 와이어프레임을 바탕으로 디자인이라는 작업을 거쳐 서비스에서 볼 수 있는 화면으로 만들고, 화면의 기능이 동작하도록 개발하는 과정을 거쳐 프로덕트가 만들어지게 되죠. 이처럼 프로덕트 개발 과정의 출발점이 되는 와이어프레임 제작을 쉽게 만들 수 있도록 도와주는 AI툴들이 있어요. 아이디어의 시작을 도와주는 똑똑한 UI/UX 툴들을 먼저 알아볼까요?

1️⃣ Uizard - 누구나 쉽게 디자인을 만들 수 있어요!

덴마크 스타트업에서 제작한 ‘Uizard’는 손으로 그린 와이어프레임을 디자인 파일, 코드로 변환시켜 주는 도구에요. 서비스 초기엔 종이를 스캔해 디자인으로 변환해 주는 것으로 시작했어요. 최근에는 텍스트만 입력하면 자동으로 UI를 만들어주는 생성형 AI 서비스를 출시했는데요. 사용자가 원하는 디자인을 프롬프트에 입력하면 앱과 웹사이트 목업을 생성할 수 있어요. 어떤 기능인지 자세하게 알아볼까요?

✅간단한 텍스트 프롬프트로 와이어프레임 생성하기

사용 방법은 간단한데요. 아래와 같은 방법을 통해 와이어프레임을 쉽게 만들 수 있어요.

1️⃣Uizard 홈페이지(https://uizard.io/)에 접속합니다.

2️⃣Signup for free를 누른 후, 회원가입을 진행합니다. 회원가입은 이메일 또는 구글, Microsoft 계정으로도 가입이 가능해요.

3️⃣접속 후 'Generate with Autodesinger'를 클릭합니다. 해당 서비스를 클릭하면, 프롬프트 작성 화면이 뜨는데요. 첫 번째로 선택해야 할 항목은 어떤 디바이스에 적합한 화면을 만들 것인지를 선택하는 것이에요. Mobile, Tablet, Web 중 원하는 디바이스를 선택합니다.

4️⃣기기 선택이 완료되면 만들어야 할 작업물에 대해 원하는 디자인 형식과 스타일 키워드를 적습니다.

5️⃣두 번째 화면에서는 화면의 스타일을 정의하는 화면인데요. 스타일을 설명할 때, 어떻게 정보를 제공할 것인지 1) 스크린샷 2) 프롬프트 3) URL 4) Brand Kit 중 하나를 선택하면 돼요.

6️⃣스타일 작성까지 완료되면 'Generate my Project' 버튼을 클릭하면 완료!

🍯파쓰의 꿀팁

저는 프롬프트를 클릭하고 이번 프로젝트에 원하는 스타일이 어떤지를 알려줬는데요. 스타일을 적는 것이 막막하다면, Uizard에서 추천하는 아래 키워드를 선택해도 좋아요.

파쓰가 직접 써봤어요!🤓

아래 화면은 제가 작성한 프롬프트에 따라 생성된 와이어프레임이에요. 커머스 플랫폼을 위한 상품 화면을 구성하고, Home 화면에는 현재 할인하고 있는 상품과 베스트 상품을 가장 최상단에 만들어달라고 하니 아래와 같이 와이어프레임이 만들어졌는데요. 이렇게 커머스 플랫폼에 필요한 주요 화면들을 만들어주기까지 단 2분 밖에 걸리지 않았어요!👏
(컴퓨터의 성능, 요구한 조건에 따라 제작 시간은 달라질 수 있습니다.)

✅ 스크린샷을 활용하여 디자인 벤치마킹하기

이외에도 Uizard는 UI 디자인을 위한 다양한 기능들을 제공하는데요. 명령어를 통해서 디자인을 만들 수도 있지만 'Start from screenshot' 기능을 활용하면, 업로드된 이미지를 분석하여 프로토타입을 재구성할 수도 있어요.

아래는 토스 앱 화면을 캡처해서 화면을 구성해달라고 요청한 이미지인데요. 이미지를 보내면 그와 동일한 형태로 화면을 만들어주고, 해당 화면을 캔버스에서 바로 수정할 수도 있어요. 이 기능을 활용하면, 프로토타이핑 단계서 화면을 어떻게 구성하면 좋을지 막막할 때, 기존의 좋은 서비스를 스크린샷하여 벤치마킹해 볼 수도 있어요.

이렇게 만들어진 UI 프로토타입을 쉽게 공유하고 평가받을 수도 있어요. 공유 링크를 통해 다른 사람들에게 작업물을 보여줄 수도 있죠. 이처럼 Uizard.io는 단순히 하나의 툴을 넘어서, 생성형 AI를 통해 UI 프로토타이핑을 쉽게 완성할 수 있도록 도와주는 툴인데요. 기존 Figma나 AdobeXD 유저라면 바로 적응해서 사용하실 수 있을 거예요.

⭐ 사용 평가(4.5/5.0)

📌이럴 때 써보세요!

다양한 디자인을 빠르게 만들어야 할 때, Uizard의 'Generate with Autodesinger'를 이용해 보세요.
어떤 스타일로 만들어야 할지 막막하다면, 'Start from screenshot' 기능을 활용하여 비슷한 산업분야의 플랫폼의 디자인을 벤치마킹해 보세요.

💵비용

‘Uizard’는 기본적인 기능은 무료로 경험해볼 수 있지만, 횟수 제한이 있어 계정당 최대 3번까지만 무료로 사용이 가능해요.
제작 횟수나 템플릿 등을 폭넓게 사용하기 위해서는 Pro 버전으로 업그레이드가 필요하며, Pro 버전은 월 USD 12 비용이 발생합니다.

⚠️주의할 점

최대 단점은 생성된 디자인을 Figma로 불러올 수 없다는 점입니다. 반대인 경우(Figma에서 작업한 디자인을 Uizard로 불러오는 경우)는 가능해요.
Uizard는 사용자 인터페이스(UI) 프로토타이핑을 목적으로 하기 때문에 완전히 작동하는 웹사이트, 앱을 제작하는 것은 아니에요.

2️⃣ Scene - 나만의 AI 비서, 뮤즈(Muse)와 함께 제작하는 맞춤형 디자인

이 서비스의 핵심은 ‘뮤즈(Muse)’라는 이름의 AI 비서인데요. AI 비서 역할을 하는 뮤즈와 함께 서비스 요약을 만들고, 단계별 결과물을 확인해가면서 맞춤형으로 와이어프레임을 제작할 수 있어요. 예를 들어, 웹사이트 개요를 구체화하거나, 이를 바탕으로 와이어프레임 생성하고, 보완하는 등 프로젝트 기획 단계에서 필요한 업무를 도울 수 있는 툴이죠.

사용 방법은 간단한데요. 아래와 같은 방법을 통해 와이어프레임을 쉽게 만들 수 있어요.

1️⃣Scene 홈페이지(https://www.scene.io/)에 접속합니다.

2️⃣회원가입은 이메일로 할 수 있으며, 구글 계정을 통해서도 가입이 가능해요!

3️⃣회원가입이 완료되면 위 이미지처럼 우측 하단에 Muse AI가 보이는데요. 여기서 'Co-create breif, and wireframe'을 클릭합니다.

4️⃣해당 버튼을 클릭하면 Muse AI가 제안하는 예시로 테스트를 해볼 수도 있고, 직접 Message 창에 원하는 내용을 입력할 수도 있어요.

5️⃣입력이 완료된 후 '전송하기' 버튼을 누르면 완료!

사전 작업

와이어프레임을 만들 서비스에 대한 내용과 어떤 항목이 들어가면 좋을지 미리 생각해두면 좋아요. 자세하게 작성할수록 원하는 구성으로 와이어프레임이 나올 수 있어요.

사후 작업

Muse AI를 통해서 만들어진 와이어프레임 요약에 대한 텍스트 정보를 수정하여 새롭게 와이어프레임을 제작하거나, 제작된 와이어프레임을 바탕으로 디자인을 수정하는 작업이 필요해요.

파쓰가 직접 써봤어요!🤓

✅ 서비스 요약(Brief) 만들기

이번 예시에서는 와이어프레임 제작하기(Co-create brief, and wireframe)를 사용해 봤는데요. 가상의 웹페이지인 ‘Brewpilot’에 대한 설명을 적고, 서비스의 특징을 간략하게 설명하면 뮤즈 AI가 바로 서비스에 대한 간략한 소개를 만들어줘요.

프롬프트를 활용해서 바로 특정 기능이나 화면에 대한 와이어프레임을 생성하는 것이 아닌 만들어질 산출물에 대한 브리프를 먼저 확인할 수 있다는 점이 가장 큰 장점이죠. 서비스 요약에는 다음과 같은 내용이 들어가는데요. 간단한 설명부터 시작해서 웹사이트의 목적, 디자인 방향, 구조까지 구체적으로 생성해 주는 것이 특징이에요. 또한 생성된 내용은 확인 후 수정이 가능해요.

제품 또는 서비스에 대한 설명(Description of a product or a service)
타겟 고객(Audience)
타겟 고객의 특성(Audience Properties)
웹사이트의 목적(Job)
웹사이트에 작성될 메시지와 톤(Messaging and tone)
웹사이트 디자인 방향(Design direction)
웹사이트 구조(Website Structure)

서비스에 대한 설명 없이 와이어프레임을 바로 제작했다면, 어떤 배경과 목적으로 만드는지 파악하기 어려울 수 있고, 여러 번 수정해야 하는 불편함이 생길 수 있는데요. 위와 같이 뮤즈 AI를 통해 단계별로 접근하면 서비스에 대한 설명과 디자인의 방향성에 대해 미리 파악할 수 있고, 서비스에 대한 수정 사항이 발생할 때마다 다시 제작해야 하는 번거로운 상황을 줄일 수 있어요.

✅ 서비스 요약(Brief)을 바탕으로 와이어프레임 제작하기

완성된 서비스 요약을 바탕으로 와이어프레임을 바로 제작할 수 있는데요. 서비스 요약 내용 위에 'Create Wireframe' 버튼을 클릭하면 Desktop/Tablet/Mobile 버전으로 와이어프레임을 생성합니다. 기기에 따라 여러 버전을 작업하거나 고려할 필요 없이 생성 단계부터 3가지 버전을 확인할 수 있죠. 또한, 와이어프레임 제작에 활용된 서비스 용약 내용을 한 화면에서 볼 수 있어 비교하면서 내용을 수정하거나 보완할 내용이 무엇인지 확인하기도 좋아요.

와이어프레임 생성 후에도 AI 비서 뮤즈와 대화를 이어갈 수 있는데요. 예를 들어, ‘현재 만들어진 페이지에 영상을 넣고 싶다’라고 뮤즈 AI에게 이야기하면, 이를 바탕으로 브리프를 수정해 주고, 기존 와이어프레임에도 바로 반영이 가능하죠. 아래 화면처럼 기존에 텍스트로 구성되어 있던 Product Features 컴포넌트가 동영상을 넣을 수 있도록 변경된 것을 확인할 수 있어요.

⭐ 사용 평가(4.0/5.0)

📌이럴 때 써보세요!

간단한 설명으로도 서비스 요약(Brief)를 생성해 주기 때문에 아이디어를 구체화하는 과정에서도 사용하기 좋아요.
프로덕트 또는 서비스에 대한 아이디어는 있지만, 어떤 식으로 화면을 구성해야 할지 모를 때 사용해 보세요. 서비스에 필요한 컴포넌트의 위치를 다양한 디바이스에 맞게 자동으로 구성해 줘요.

💵비용

무료 버전(Starter)은 1개의 프로젝트 생성, View 권한 부여 가능, 뮤즈 AI와 20번까지 대화가 가능해요.
프로 버전은 월 EUR29가 발생해요. 무료 버전(Starter)에 포함된 모든 것을 제한 없이 사용 가능해요. 추가로 버전 기록에 액세스하고 웹 디자인 작업을 배포하는 것도 가능합니다.

⚠️주의할 점

웹사이트를 다시 접속하거나, 새로운 창으로 접속할 경우 뮤즈와 대화한 내용이 종종 중간에 사라져서 다시 입력해야 하는 경우가 있어요.

AI랑 함께 코딩해요! 개발을 도와주는 생성형 AI 툴🤖

프로덕트에 대한 와이어프레임이 완성되었다면 필수 기능 테스트를 위한 최소한의 개발이 필요한데요. 제품의 형태와 필수 기능이 정해진 후, 웹/앱 개발을 위한 간단한 코딩이 가능한 파써라면 이 도구들을 한 번 사용해 보세요. 이번에 소개해 드릴 생성형 AI 툴 GitHub Copilot과 Tabnine은 몇 글자만 입력해도 맥락에 맞는 코드를 제안해 주거든요!

1️⃣ Github Copilot - AI 코드 어시스턴트

2023년에 발표된 Github Copilot은 OpenAI Codex 모델 기반으로 방대한 오픈소스 코드를 학습하여 다양한 코드의 자동완성 기능을 제공하는데요. “Don’t fly solo(혼자 하지 마세요!)”라는 슬로건과 함께 나온 Github Copilot은 개발자가 파일럿(기장)이자 AI가 이를 보조하는 코파일럿(부기장) 역할을 담당하며 함께 프로그래밍할 수 있어요. Copilot을 사용하여 개발하면 어떤 장점들이 있을지 한 번 자세하게 알아볼까요?

✅ Github Copilot 사용방법 (VSCode에 설치하기)

Gihub Copilot는 다양한 IDE(통합 개발 환경)에서 제공하고 있지만, 간단하게 VSCode에서 사용할 수 있는 방법을 알려드릴게요.

1️⃣VSCode ➡️ Extensiosn 검색창에 'Copilot'을 입력하고 검색 버튼을 누릅니다.

2️⃣검색된 목록에서 'Github Copilot'과 'Github Copilot Chat'을 차례대로 설치해 주세요.

3️⃣설치가 완료되면 좌측에 'Gihub Copilot Chat'아이콘이 보입니다. 해당 아이콘을 클릭하면 유료 결제를 한 경우에는 환영 메시지가 보입니다.

(아직 유료 결제를 하지 않은 경우, 가입해야 쓸 수 있다는 안내 메시지가 출력됩니다.)

4️⃣'Start 30-day Free Trial'을 누르면 Github 결제 웹 페이지가 나옵니다.

5️⃣유료 결제가 완료되면 채팅창에서 Github Copilot과 함께 코딩 시작!

[참고] VS Code에서 제공하는 Github Copilot 도구

Github Copilot: IDE에 코드 자동 완성 기능을 지원하는 AI 도구입니다.
Github Copilot Chat: IDE 내에서 프로그래밍 관련 질의 답변이 가능한 채팅 인터페이스입니다.

파쓰가 직접 써봤어요!🤓

✅ 코드 자동 완성 기능

코드 편집기에서 코드를 작성하기 시작하면 Copilot이 이와 관련된 코드를 제안하는 기능이에요. 특정한 함수를 만들어야 하는 경우, 필요한 함수에 대한 주석을 추가하면 더 정확한 답변을 얻을 수 있어요.

✅ 채팅 기능

현재 코드에 오류가 있거나 새로운 기능을 만들 때, 채팅을 통해 질문할 수 있어요. 단순한 검색 엔진이 아닌 코드베이스에 적합한 답변을 제공하죠. 현재 함수를 리팩토링*하거나, 오류를 방지할 수 있는 코드를 추가할 수도 있어요.

* 리팩토링(Refactoring)이란? 리팩토링은 코드의 품질을 높이기 위해 중복 코드와 긴 함수 등 가독성과 유지보수성을 저하하는 문제점을 찾아 개선하는 작업을 뜻해요.

✅ /(슬래시) 명령어 기능

개발 작업에서 단축키 사용은 작업의 효율성을 높이기 위해 꼭 필요한데요. 효율을 높이기 위해 등록된 단축키가 점점 많아지면, 어떤 단축키와 기능이 맵핑되는지 까먹을 때가 많아요. 하지만 Copilot에서는 '/(슬래시)' 명령어를 사용하면 단축키를 외우지 않고도 개발에 필요한 기능을 쉽게 이용할 수 있는데요.

사용자는 간단한 명령어를 통해 복잡한 프롬프트 설계 없이도 일반적인 코딩 작업에 필요한 VS Code 기능들을 이용할 수 있죠. 예를 들어, 현재 코드 상에서 바로 확인할 수 있는 오류(빨간 줄 표시)가 있다면, /fix 명령어를 통해 기존 VS Code 기능 중 하나인 Quick Fix 기능(단축키:Ctrl/Cmd + .)을 단축키 없이도 활용할 수 있어요.

<Hemoglobin-Based Oxygen Carriers: Where Are We Now in 2023? ,출처: https://doaj.org/ 검색 결과 >

⭐ 사용 평가(5.0/5.0)

📌이럴 때 써보세요!

새로운 기능을 구현할 때 어떻게 시작해야 할지 잘 모르겠다면, Copilot에게 주석으로 구현할 기능에 대해 설명해 보세요. 자세하게 설명할수록 지금 필요한 기능 함수를 더 완벽하게 만들어 줄 거예요!
반복적인 코드를 작성해야 할 때, 매번 복사+붙여넣기+수정 작업의 연속이라 귀찮으셨나요? 처음 몇 줄만 입력하면 Copilot이 나머지를 채워줘요!
익숙지 않은 라이브러리나 API를 사용할 때, Copilot의 제안을 참고하세요.

💵비용

30일 무료 이용이 가능하지만, 이후에는 월 결제 USD 10 또는 연간 결제 USD 100가 필요해요.

⚠️주의할 점

Copilot의 제안을 어느 정도 참고하는 것은 좋지만, 제안한 코드로만 적용하는 것은 위험할 수 있어요.
현재 회사에서 이용하고 있는 변수 규칙이나 개발 주의사항을 참고하여 사용하세요. 민감한 정보를 주석에 포함하지 않도록 주의하세요.

2️⃣ Tabnine - AI기반 코드 완성 도구

Tabnine은 딥러닝 알고리즘으로 사용자의 코딩 스타일과 패턴을 학습하고, 이를 바탕으로 개인 맞춤형 코드 제안을 제공하는 툴이에요. Java, Pyhon, JavaScript 등 다양한 언어를 지원하고 사용자의 코딩 습관을 학습하여 점점 더 최적화된 개인 맞춤형 코드를 제안하는 것이 특징이라고 합니다.

✅ Tabnine으로 개발 작업 효율 높이기

사용방법은 다음과 같아요.

1️⃣웹사이트(https://www.tabnine.com/)에 접속해요!

2️⃣사용할 통합 개발 환경을 선택해야 하는데요. Github Copilot과 동일하게 VS Code 환경에서 사용하기 위해서는 Extensions 탭에서 설치가 필요해요.

5️⃣Extensions 탭에서 Tabnine을 검색 후 설치합니다.

6️⃣설치작업이 끝나면 좌측 탭에 Tabnine 아이콘이 보이는데요. 해당 아이콘을 누르면 채팅이 시작됩니다!

<출처: VS Code Extensions의 Tabnine 검색 결과>

파쓰가 직접 써봤어요!🤓

✅ 기능 구현을 위해 필요한 개발 방법 물어보기

기능을 개발해야 하는데 어디서부터 어떻게 시작해야 할지 막막한 파써분들! 여기를 주목해 주세요. 아래 예시처럼 ‘애플리케이션에서 실시간으로 날씨 데이터를 가져오려면 어떻게 해야 하지?’라고 질문만 작성하면, Tabnine이 단계별로 어떻게 수행해야 할지 친절하게 알려주거든요.

뿐만 아니라, 위에서 계획한 순서대로 원하는 언어 형태로 실행 가능한 코드로 완성해 줍니다. 아래 예시처럼 완성된 코드를 현재 Workspace에 바로 적용할 수도 있어요!

✅ 간단한 조각 코드 생성하기🧀

간단한 함수를 만들거나, 조각 코드가 필요할 때도 사용할 수 있는데요. 아래 화면처럼 ‘계산을 위한 class를 만들어줘’라고 한다면, 샘플 코드를 생성해 주고, 바로 적용할 수 있어요.

✅코드 설명 그리고 주석 추가까지!👏

혼자 개발하는 프로그램이라면 상관없겠지만, 팀으로 개발하는 경우에는 주석이 필요한데요. 이 함수가 어떤 역할을 하는 함수인지, 어떤 상황에 쓰이는지 다른 사람도 쉽게 이해할 수 있도록 작성하는 것이 중요해요. 만일 주석을 작성하는 것이 귀찮거나, 다른 사람이 작성한 코드를 이해하기 어렵다면 Tabnine을 이용해 보세요! 먼저 내가 만든 코드의 주석을 만들고 싶을 땐, 명령어 창에 ‘create inline documentation’ 기능을 이용해 보세요. 해당 명령어를 입력하면 아래와 같이 Tabnine이 함수 설명뿐만 아니라 파라미터, 변수, 리턴 값에 대해 주석을 생성해 줘요. 이렇게 주석을 꼼꼼하게 작성해 준다면, 이 코드를 처음 본 사람이라도 코드를 이해하는 데 많은 도움이 될 거예요!

⭐ 사용 평가(4.0/5.0)

📌이럴 때 써보세요!

다른 사람이 작성한 코드가 쉽게 이해되지 않는다면, Tabnine Chat의 ‘Explain Code’를 사용해 보세요.
이해가 되지 않는 부분을 드래그하고, Explain Code를 선택하면 해당 코드가 어떤 역할을 하는 코드인지 상세하게 설명해 주거든요!

💵비용

무료 플랜과 유료 플랜 두 가지가 있어요. 하지만 무료 플랜은 사용하는 횟수에 제한이 있어요.
유료 플랜도 처음에는 무료 사용이 가능한데요. 무료 기간인 90일이 지난 이후에는 월 USD 12의 이용 요금이 발생해요.

⚠️주의할 점

Tabnine도 Github Copilot과 비슷하게 코딩을 보조하는 역할로 사용하면 정말 좋지만, 이 코드만 사용하기에는 한계가 있어요. 어느 정도 기존에 작성한 코드 형식에 맞게 수정하는 것이 필요하죠.
Github Copilot과 Tabnine을 모두 사용해 본 사용자들 리뷰에선 아직까진 Github Copilot이 성능이 더 좋다고 합니다.
가장 중요한 단점은 확장 프로그램 자체가 무겁다 보니, 프로젝트 사이즈가 커지고 코드가 복잡해질수록 코드를 짤 수 없을 정도로 느려진다는 단점이 있다고 해요.

AI를 활용하여 테스트 진행하기💯

이제 프로토타입이 어느 정도 만들어지고 난 후, 제품에 대한 테스트를 진행해야 하는데요. 완벽하게 만든 프로덕트라도 테스트를 통해 문제점을 파악하고 개선해나가야 더 좋은 서비스가 될 수 있기 때문이죠. AI가 없었던 시절에는 사람이 직접 테스트 스크립트를 작성하고, UI가 바뀔 때마다 유지 보수 작업 후 다시 수정하는 등 반복적이고 귀찮은 일들이 많았는데요. 서비스 출시 전 매일매일 반복되는 테스트의 굴레에서 벗어나 성공적인 테스트를 도와줄 생성형 AI 툴에 대해 살펴볼까요?

1️⃣ Testim - AI와 함께 테스트 코드 작성하기

Testim은 AI 기반의 테스트 자동화 도구로, 웹 및 모바일 애플리케이션을 개발하는 과정에서 테스트 작업을 보다 효율적이고 간편하게 수행할 수 있도록 도와줘요. AI와 머신러닝을 활용해 자동으로 테스트 코드를 생성하고, 애플리케이션 변경 사항에 즉시 대응할 수 있는 스마트 로케이터 기능이 포함되어 있어요. 이를 통해 복잡한 소프트웨어 테스트를 간소화하고, 개발 속도를 높이는 데 큰 도움을 줄 수 있는 도구예요.

현재 Testim에서 제공하는 AI 기능으로는 'Add Custom Action'이 있어요. Github Copilot 기능을 Testim에서 바로 사용할 수 있도록 추가된 기능이에요. 이 기능 사용을 위해서는 몇 가지 설정이 필요한데요. 먼저 사용 방법을 알아볼까요?

1️⃣https://www.testim.io/에 접속합니다.

2️⃣'TRY TESTIM FOR FREE'를 누르고, 회원가입을 진행합니다. 회원가입은 이메일, Google, Github 계정으로 가입이 가능합니다.

3️⃣회원가입 후 로그인을 하면 프로젝트 페이지가 보이는데요. 프로젝트 페이지에서 'Create Test' 버튼을 클릭하면 테스트 준비 완료!

4️⃣'Create Test' 버튼을 누른 후에는 단계별로 어떤 테스트를 진행할지에 대한 워크플로우를 그리는 화면이 보입니다. 이때, AI 툴을 사용할 수 있는데요.

5️⃣아래 이미지에서 보이는 'Add Custom Action' 메뉴가 생성형 AI 툴 Copilot을 이용할 수 있는 메뉴에요.

6️⃣해당 메뉴를 클릭 후, 새로운 테스트명, 테스트가 저장될 폴더를 클릭 후 'Create Step'을 누르면 사용 준비 완료!

파쓰가 직접 써봤어요!🤓

✅채팅을 통해 간단한 테스트 환경 구성하기

먼저 네이버에서 검색 버튼을 눌렀을 때 액션에 대한 테스트를 진행한다고 가정해 보았는데요. 영어로 어떤 테스트를 진행할지 채팅창에 입력하면 단계별로 진행해야 할 과정들을 알려줘요.

<채팅창에 네이버 검색창에 대한 테스트 수행방법 질의 답변 캡처 화면>

아래 이미지는 Testim Copilot에서 알려준 방법대로 네이버에 파쓰레터 검색 후, 구독하기 버튼을 누르기까지의 과정을 워크플로우로 만들어봤어요.

그다음 특정 버튼에 대한 액션이 정상적으로 작동하는지 확인하기 위한 코드를 작성해달라고 부탁해 봤는데요. 아래 테스트 코드가 Testim Coplilot을 통해 작성된 코드에요. 아래 코드에서 버튼에 대한 Id 값만 바꿔주면 원하는 버튼에 대한 클릭 이벤트 테스트를 할 수 있는데요. 복잡한 코드보다는 간단한 단위 테스트를 진행할 때 이용하면 좋을 것 같아요!

Testim Copilot의 테스트 코드는 기본적으로 Javascript 코드로 작성되고 있어요. 만약, 다른 언어로 테스트 코드를 작성하기 위해서는 테스트 코드 작성을 위한 언어를 명시해 줘야 해요.

작성된 테스트 코드는 바로 테스트 워크플로우에 적용할 수 있어요. 아래 코드에서 버튼에 대한 Id 값만 바꿔주면 원하는 버튼에 대한 클릭 이벤트 테스트를 할 수 있는데요. 코드를 적용하고 'SAVE'버튼을 누르면 저장 완료! 전체 워크플로우에서 보면 해당 테스크 코드가 적용된 워크플로우를 확인할 수 있어요.

⭐ 사용 평가(3.0/5.0)

📌이럴 때 써보세요!

웹페이지 테스트 중 간단한 버튼이나 특정 컴포넌트에 대한 테스트 단계를 추가하고 싶을 때, Add Custom Action을 사용하면 좋아요.
하지만 해당 기능은 기존의 IDE 환경에서 Github Copilot 설치시 에도 사용할 수 있는 기능이라 Testim을 통해 전체적인 테스트 워크플로우를 구성하는 게 아니라면 크게 추천하지는 않아요!

💵비용

기본적인 기능들은 Web에서 무료로 사용이 가능해요. 하지만 팀 작업 및 지속적인 사용을 위해서는 유료 버전으로 업그레이드가 필요해요.
유료 버전은 현재 정해진 가격 모델이 없으며, 사용 인원, 사용 기능, 테스트 공유, 테스트 수행 횟수 등에 따라 개별적으로 솔루션에 대한 상담 후 가격이 책정된다고 해요.

⚠️주의할 점

테스트 도구에 필요한 기본적인 도구들은 모두 지원하고 있지만, AI 기능 사용은 특정 단계에서만 사용이 가능해요.
전체적인 테스트 워크플로우에서 AI 툴이 적용되는 부분은 테스트 코드 작성 단계에서만 가능해요.
Copilot 기반의 AI 채팅 도구는 아직까지 완벽하진 않아요. Testim에서 지원하는 언어나 코드가 정해져있어서 테스트에 사용하는 환경에 따라 사용 여부가 달라질 수 있어요.
또한 웹 기반의 테스트(URL을 통한 테스트 수행)를 수행하는 것에는 문제가 없지만 모바일 기반의 테스트 자동화에는 사용할 수 있는 테스트 기능이 많지 않아요.

오늘 소개해 드린 AI 툴들을 활용하여 플랫폼 메이커, 파써분들도 업무 효율을 높여보시는 것은 어떨까요? 이번 레터에서 소개한 것 외에도 더 다양한 AI 툴들이 궁금하시다면 아래 사이트에서 카테고리별 필요한 툴을 한 번 확인해 보세요!👇

https://topai.tools/categories

📚참고한 자료

📌 파쓰 퀴즈

💫퀴즈 풀고 상품 받기

📨 파쓰가 전하는 테크 소식

파쓰가 소개하는 주간 테크 소식

이번 주 파쓰가 엄선한 주요 테크 블로그 소식을 알아볼까요?

1️⃣ [여기어때] 여기어때 버킷팩, 노홍철과 함께 떠나는 울릉도&독도 여행

여기어때에서 새로운 여행상품인 <여기어때 버킷팩>을 출시했다고 하는데요. 이번에 새로운 시리즈로 출시한 <여기어때 버킷팩>은 여행과 버킷리스트를 결합한 상품으로, 여행을 하며 버킷리스트를 채워가는 즐거운 경험을 위해 제작되었다고 해요. 자세한 이야기는 본문을 통해 확인해 보세요!

본문 확인하기

2️⃣[SK플래닛] SK ICT Family사 테크 블로그 총정리(2024년 버전)

'IT 회사'로 불리는 많은 기업들은, 그들이 개발하는 제품을 통한 기술력을 홍보하고 작성자의 퍼스널 브랜딩을 지원하는 등의 다양한 목적으로 기술(테크) 블로그를 운영하고 있는데요. SK에서도 SK플래닛을 포함한 SK ICT Family사들이 각 사별 특성에 맞는 테크 블로그를 운영하고 있다고 해요. 해당 본문에서는 SK ICT 각 사별 테크 블로그의 2024년 버전을 소개한다고 합니다! 자세한 이야기는 본문을 통해 확인해 보세요!

본문 확인하기

3️⃣ [배달의민족] 실시간 반응형 추천 개발 일지 #1. 프로젝트 소개

우아한형제들의 추천 프로덕트 팀은 배민, B마트, 배민스토어 등 우아한형제들의 다양한 서비스에 추천 서비스를 제공하는 팀으로, 사용자들이 원하는 가게, 메뉴, 상품, 셀러 등을 쉽고 빠르게 찾을 수 있도록 돕고 있다고 합니다. 지난 23년 12월, 추천 프로덕트 팀은 사용자의 실시간 행동 이력을 활용하여 가게를 추천하는 실시간 반응형 추천 시스템을 도입했는데요. 이번 글에서는 실시간 반응형 추천 시스템의 개발 배경 및 설계, 시스템 구성 등을 개괄적으로 소개해 준다고 합니다.

본문 확인하기