개발자가 써본 Windsurf Editor 인공지능 개발도구

Windsurf Editor는 최근 주목받는 AI 개발 도구 중 하나로, 개발자와 비개발자 모두를 대상으로 한 혁신적인 접근 방식을 제공한다고 생각합니다. 개발자라 이것저것 쓸 수 있는 환경이라 행복한데요.

Windsurf Editor 도구를 활용하여 실제로 개인 프로젝트를 진행해봤는데 생산성이 놀랍네요. 개발을 몰라도 일부는 처리되지만, 상세한 처리는 개발을 알아야 한다는 점!

Corsair AI와의 대화로 시작

Windsurf Editor의 가장 강력한 기능 중 하나는 Corsair AI라는 대화형 AI 비서입니다. 저는 프로그래밍에 대해 거의 아는 것이 없었지만, Corsair AI와 대화를 통해 필요한 기능을 구현할 수 있었습니다.

제가 Corsair AI에게 요청한 것은 간단했습니다:

"페이스북 이모티콘 사이트를 만들어 주세요."

처음엔 단순한 부탁이었습니다. 그런데 Corsair AI는 마치 사람처럼 대답하며 제게 필요한 모든 과정을 도와주었습니다. 예를 들어, 아래와 같은 질문을 던질 때마다 세부적인 답변을 제공해 주었습니다.

"이모티콘 데이터를 어디에 저장해야 하나요?"
"사용자가 이모티콘을 검색하거나 복사할 수 있는 기능을 추가할 수 있나요?"
"이 사이트를 배포하려면 어떻게 해야 하나요?"

AI는 복잡한 기술 용어를 사용하지 않고도 쉽게 설명하며, 필요한 코드를 자동으로 생성했습니다.

오류가 날때마다 에러코드를 던져주면서 고치라고 했더니 알아서 고칩니다.

사실 파이썬을 실행할때 오류가 계속 나서 짜증이 났습니다. 10번 이하로 고쳤네요.

# -*- coding: utf-8 -*-

from flask import Flask, render_template, g

import sqlite3

import os

app = Flask(__name__)

DATABASE = os.path.join(os.path.dirname(os.path.abspath(__file__)), 'emoticons.db')

def dict_factory(cursor, row):

d = {}

for idx, col in enumerate(cursor.description):

value = row[idx]

if isinstance(value, str):

value = value.decode('utf-8')

d[col[0]] = value

return d

def get_db():

if not hasattr(g, 'sqlite_db'):

g.sqlite_db = sqlite3.connect(DATABASE)

g.sqlite_db.text_factory = str

g.sqlite_db.row_factory = dict_factory

return g.sqlite_db

@app.teardown_appcontext

def close_db(error):

if hasattr(g, 'sqlite_db'):

g.sqlite_db.close()

# 기본 이모티콘 데이터

default_emoticons = [

{"emoticon": u"(づ｡◕‿‿◕｡)づ", "description": u"행복한 포옹"},

{"emoticon": u"(╯°□°）╯︵ ┻━┻", "description": u"테이블 뒤집기"},

{"emoticon": u"¯\\_(ツ)_/¯", "description": u"으쓱으쓱"},

{"emoticon": u"(◕‿◕✿)", "description": u"귀여운 미소"},

{"emoticon": u"ʕ•ᴥ•ʔ", "description": u"곰돌이"},

{"emoticon": u"(｡♥‿♥｡)", "description": u"사랑스러운 눈"},

{"emoticon": u"(╯︵╰,)", "description": u"슬픔"},

{"emoticon": u"◉_◉", "description": u"놀람"},

{"emoticon": u"😂", "description": u"웃겨 죽겠어"}, # 😂 이모지

{"emoticon": u"😍", "description": u"완전 좋아"}, # 😍 이모지

{"emoticon": u"😱", "description": u"헉!"}, # 😱 이모지

{"emoticon": u"😭", "description": u"엉엉"}, # 😭 이모지

{"emoticon": u"😘", "description": u"사랑해"}, # 😘 이모지

{"emoticon": u"😎", "description": u"멋져"}, # 😎 이모지

{"emoticon": u"😇", "description": u"천사"}, # 😇 이모지

{"emoticon": u"🤣", "description": u"웃겨 죽어"}, # 🤣 이모지

]

def init_db():

# 데이터베이스 파일이 있으면 삭제

if os.path.exists(DATABASE):

os.remove(DATABASE)

# 새로운 데이터베이스 생성

db = sqlite3.connect(DATABASE)

db.text_factory = str

db.execute('''CREATE TABLE emoticons

(id INTEGER PRIMARY KEY AUTOINCREMENT,

emoticon TEXT NOT NULL,

description TEXT)''')

# 기본 데이터 삽입

for emoticon in default_emoticons:

db.execute('INSERT INTO emoticons (emoticon, description) VALUES (?, ?)',

[emoticon['emoticon'].encode('utf-8'),

emoticon['description'].encode('utf-8')])

db.commit()

db.close()

print("Database initialized with default emoticons!")

@app.route('/')

def index():

db = get_db()

cur = db.cursor()

cur.execute('SELECT * FROM emoticons')

emoticons = cur.fetchall()

return render_template('index.html', emoticons=emoticons)

if __name__ == '__main__':

# 애플리케이션 시작 시 항상 데이터베이스 초기화

init_db()

app.run(debug=True)

<!DOCTYPE html>

<head>

<style>

body {

font-family: 'Arial', sans-serif;

max-width: 800px;

margin: 0 auto;

padding: 20px;

background-color: #f0f2f5;

}

h1 {

color: #1877f2;

text-align: center;

margin-bottom: 30px;

}

.emoticon-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 20px;

}

.emoticon-card {

background: white;

padding: 20px;

border-radius: 8px;

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

text-align: center;

transition: transform 0.2s;

}

.emoticon-card:hover {

transform: translateY(-5px);

}

.emoticon {

font-size: 24px;

margin: 10px 0;

cursor: pointer;

padding: 10px;

background-color: #f0f2f5;

border-radius: 4px;

}

.description {

color: #65676b;

font-size: 14px;

}

.copy-message {

color: #1877f2;

font-size: 12px;

margin-top: 5px;

display: none;

}

</style>

</head>

<body>

{% for emoticon in emoticons %}

</div>

<div class="description">{{ emoticon.description|safe }}</div>

<div class="copy-message">복사되었습니다!</div>

</div>

{% endfor %}

</div>

function copyEmoticon(element) {

const text = element.textContent.trim();

navigator.clipboard.writeText(text).then(() => {

const message = element.parentElement.querySelector('.copy-message');

message.style.display = 'block';

setTimeout(() => {

message.style.display = 'none';

}, 2000);

});

}

</script>

</body>

</html>

DROP TABLE IF EXISTS emoticons;

CREATE TABLE emoticons (

id INTEGER PRIMARY KEY AUTOINCREMENT,

emoticon TEXT NOT NULL,

description TEXT

);

이모티콘을 추가해줘!

😍 이런 이모티콘을 하니깐 또 고칩니다.

아니 이렇게 쉽게 개발이 되면, 아이디어가 있는 사람이 더 유리하겠죠?

아니면 서툰 AI와 진념으로 계속 이야기하고, 에러코드 던져주고 하다보면 개발은 될겁니다.

엔돌슨의 IT이야기

개발자가 써본 Windsurf Editor 인공지능 개발도구