Replit 기본 사용법

 

Ai가 발전하면서 많은 사람들이 개발에 관심을 가지기 시작했다.

비전공자, 컴알못에게는 ai가 문제가 아니라 컴퓨터에 뭔가를 설치하고 설정하는 것-비주얼 스튜디오 코드를 설치하고 배우는 것부터가 장벽이다.

이러한 벽을 깨는 여러 툴들이 있는데, 코딩을 하려면 이 정도는 알아야지, 하는 것들을 건너뛰고 ‘일단 해 볼 수 있게’해 준다.

고도화되고 기술적인 개발에 있어 여전히 훈련된 개발자의 손길이 필요하지만, 변화하는 세상에 Ai로 코드 짜는 법을 알아두면 어딘가 쓸모 있지 않을까?

오늘은 그 첫 단계, 웹 기반 개발 환경 서비스 Replit의 기본적인 사용법을 알아보자. 

Replit 회원가입하기

https://replit.com/signup

(구글, 깃허브, 페이스북 아이디 등으로 가입이 가능하다.)

이름(First Name), 성(Last Name)

How much software creation experience do you have?

개발에 대한 경험을 묻는 질문이다. 잘 모르겠다면 ‘None’ 에 체크

Where do you plan to use Replit?

Replit을 사용하는 이유를 묻는 질문이다. 잘 모르겠다면 For personal(개인적인 사용목적)에 체크

Plan 체크

유료플랜을 사용하면 좀 더 발전된 AI를 본격적으로 사용할 수 있다.

Trial이 목적이라면 Free 선택. 

프롬프트 발전시키기

아까 말했듯 일부 기능은 유료 플랜에서 가능하기 때문에 Start Building은 비활성화되어 있다.

대신 improve prompt 버튼은 활성화되어 있는데, 한번 눌러 보자.

다음과 같이 한줄짜리 프롬프트에 대한 꽤 그럴듯한 조언이 출력된다.

내용은 아래와 같다.

A web-based image to PDF converter application that transforms uploaded images into downloadable PDF documents.

Core Features:

• Single and multiple image upload functionality
• Preview uploaded images before conversion
• Convert images to PDF format
• Download generated PDF files
• Support for common image formats (JPG, PNG, GIF)

UI/Style:

• Document-centric interface with clear upload zones and preview areas
• Progress indicators with minimal animations for conversion process
• Professional color scheme with paper-white backgrounds and accent colors for actions 

웹 기반 개발하기

Create Repl 버튼을 클릭하고, Choose a template 버튼 클릭.

원하는 언어를 선택하고, +Create Repl 클릭.

상단 중앙의 Run 버튼을 클릭하면 webview 화면에 출력되는 모습을 확인할 수 있다. 

AI 사용하기

webview 좌측에 있는 AI를 클릭한다.

A web-based image to PDF converter application that transforms uploaded images into downloadable PDF documents.

Core Features:

• Single and multiple image upload functionality
• Preview uploaded images before conversion
• Convert images to PDF format
• Download generated PDF files
• Support for common image formats (JPG, PNG, GIF)

UI/Style:

• Document-centric interface with clear upload zones and preview areas
• Progress indicators with minimal animations for conversion process
• Professional color scheme with paper-white backgrounds and accent colors for actions

이 내용을 그대로 복붙했다. 프론트엔드로 구현하기에는 무리가 있는 내용인 것 같지만, 일단 넣어 본다.

이런 형식으로 html에 대해 나오고, 하단에는

Next Steps:

• Implement the JavaScript functionality in  using the features outlined above.

  script.js

• Create the CSS styles in  for a professional and user-friendly design.

  style.css

Let me know if you would like me to elaborate on specific parts or provide more detailed code snippets.

로 본인이 제공한 HTML 외에 자바스크립트와 CSS에서 추가적으로 뭔가를 행해야 하며, 자기에게 지시할 내용이 있다면 알려달라고 이야기하고 있다.

드래그 해서 마우스 우측을 클릭하면, ai에게 해당 부분을 설명해달라고 하거나 변경해 달라고 할 수 있다.(변경 시에는 프롬프트를 입력하도록 되어 있다.)

코드의 아무 부분이나 클릭해서 마우스 우측을 클릭하는 경우에도 코드를 추가할 수 있게 되어 있다.

한국어로 입력하는 것은 상관없지만 모든 답변은 영어로 받게 된다.