DEVOCEAN

안녕하세요 반도체 설계 쪽에 합류한 주니어 엔지니어 입니다!

(SW 개발은 완전 문외한 입니다 ^-^;)

TMI를 말씀드리면

저는 학생 때 배웠던 c와 pyhton까지 가물 가물 해가는 상황이기에... "이래서는 안되겠다! "는 생각으로

입사 첫해의 열정을 되살려 프로그래밍 쪽으로 학습을 시작하려 합니다.

그리고 이참에 저와 같은 상황이신 분께 제 기록이 미세 먼지 만한 도움이라도 되지 않을까? 싶어 저의 여정을 기록으로 남깁니다

[서론]

이런 저라도 프로그램 개발을 할 수 있게 해주는 마법의 tool이 있다고 해서 뒤늦게 살펴보려 합니다

바로 cursor AI! https://www.cursor.com/

비록 턱걸이로 간신히 "Gen.Z" 이지만...

새로운 배움은 책으로 하기를 좋아하는 비효율 끝판왕 이기에 서점에 가서 책을 사왔습니다! (아직 학생 때 습관을 버리지 못해서...)

커서 AI 트렌드 & 활용 백과 - 서승완 지음 (!광고 아닙니다!)

우선은 해당 도서를 이용해 cursor AI를 setup하고, 도서 내부에 있는 project를 따라하면서 감을 잡은 뒤에 본격적으로 활용하려 합니다.

함께 보시죠!

[본론]

Cursor setup

저는 우선 아래와 같이 setup 진행 하였습니다.

아! 그전에 Data Preferences 는 당연히 Privacy Mode로 설정하였습니다.

CH1: Project directory 설정 및 HTML 파일 생성

그전에 저는 웹이 뭔지도 모르는 완전 문외한이기에... 간단히 정리해보고 가겠습니다!

CH1: Project 폴더와 파일 만들기 -> CH0. web 기초 상식

web 은 클라이언트와 서버로 나뉩니다.

웹 클라이언트의 경우,

• (통상) 사용자인 제 컴퓨터/스마트폰/기타 기기 환경을 말하는 것이겠네요.

• 만약 제가 제 스마트폰으로 google에 접속한다면, 제 스마트폰이 클라이언트 입니다.

• 저는 클라이언트를 통해 서버에 요청을 주고,

• 서버의 응답을 받아가면서

• google을 사용하겠네요!

이와 반대로 웹 서버의 경우,

• 클라이언트 (제 스마트폰) 의 요청을 받아서,

• 정보나 서비스를 제공하는

• 컴퓨터 or 프로그램 입니다.

제가 무식하게 이해한 바를 표현하면,

• 구글(website) 이 저희에게 검색 정보를 보내주기 위해서,

• 구글 서버 (web server) 는

• 클라이언트인 제 스마트폰 (web client)이 보낸 명령을 받아서 처리하고

• 저에게 검색 결과를 전달해줄 것입니다.

동시에 수없이 많을 클라이언트의 요청을 처리해야겠네요!

아래는 GPT에게 생성 요청한 그림입니다.

다시 돌아와서,

CH1: Project directory 설정 및 HTML 파일 생성

작업 dir setting은 무엇보다 중요하죠!

Cursor 내에서 해당 Open project 를 통하여 dir를 설정해주었습니다.

저는 우선 PRJ1_KPOP 안에서 파일들을 만들어가면서 website를 만들어보도록 하겠습니다!

Open project로 원하는 dir을 열어주면 하면 아래와 같은 화면이 나오네요

가장 핵심이 되는 기능은 오른쪽의 초록색 부분입니다.

이곳이 마치 저희에게 익숙한 GPT 처럼, Cursor와 User가 "대화" 하면서 프로그램을 작성할 수 있게 해주는 side bar 입니다.

해당 창에, 아래와 같이 명령을 내려보았습니다:

"K-Pop을 소개하는 HTML 페이지를 만들어" 명령을 내리니, 아래처럼 코드를 생성해주네요.

cursor가 작성해준 HTML code를 저장한 뒤에, 한번 실행해보았습니다.

실행 결과(1):

문외한인 저에게는 나름 공대 감성 있는 페이지 같아 보입니다만, 아직 다른 분들께 보여드릴 수는 없을 것 같네요!

조금 더 다듬도록 해야겠습니다. (물론 cursor에게 시켜서요!)

일전에 명령을 입력했던 창에서 조금 더 명령을 이어가 보겠습니다.

수정 요청:

"지금 디자인이 너무 단조로워. 민트색 계열의 색상을 넣어서 더 예쁘게 바꿔줘"

입력하고 보니, code를 cursor가 알아서 수정해준 후, 수정된 부분까지 표시해줍니다.

무엇보다, 수정된 부분을 Accept 할지, Reject 할지도 결정할 수 있네요!

이제 몇 가지 더 주고 받으면서 수정을 진행하겠습니다.

마음에 들지는 않지만, 우선은 이 정도로만 하고, 다음으로 넘어가겠습니다.

CH2. 프레임워크와 라이브러리 사용

지금까지는 웹의 뼈대가 되어주는 HTML을 Cursor를 통하여 생성하였습니다.

이번에는 CSS 프레임워크를 적용해보도록 하겠습니다.

아래와 같이 입력해보죠:

"여전히 디자인이 별로 예쁘지 않아. 테일윈드(Tailwind) CSS를 이용해서 더 세련된 디자인으로 바꿔줘"

웹 페이지만 보면 큰 차이가 없는 것 같습니다만,

code 길이가 짧아졌습니다. +101 -246 이면, 전체적으로 145개의 line이 줄어든 샘이네요

이후 간단하게 디자인을 수정해서 아래와 같이 만든 후, 이제 애니메이션 효과를 추가해보도록 하겠습니다.

CH 3. 애니메이션 효과 추가 & 최신 내용 검색해서 가져오기

cursor에 아래와 같이 입력하였습니다:

"각 요소들이 서서히 뜨도록 Fade In 애니메이션 효과를 부여해줘"

-> Fade In 애니메이션을 적용해주네요!

또한 최신의 내용을 반영하기 위해서, 아래의 기능을 활용하였습니다.

@ Web 선택 후 아래의 명령어 입력:

"한국의 최신 K-POP 관련 뉴스를 검색해보고, 그 내용을 반영해서 홈페이지에도 넣어줘"

최신의 정보를 웹에서 검색해서, 저희의 홈페이지에 삽입해주겠다고 하네요

이번엔 미리 특정 페이지 URL을 주고, 해당 페이지의 내용을 가져오게 하겠습니다.

개인적으로는 K-POP을 잘 몰라서 그냥 나무위키 를 넣어주겠습니다 ㅎㅎ

@https://namu.wiki/w/K-POP

이 나무위키 사이트의 내용을 반영해서 홈페이지의 내용을 더 많이 채워줘. 필요하다면, 해당 페이지에 연결되어 있는 사이트들까지도 참고해서 작성해줘

결과 보시죠! 훨씬 풍부해졌네요!

CH 4. 기타 꾸미기 진행 , 최종 완성

지금까지 작성한 html 파일을 토대로, navbar 도 추가해주고, US pop과 J pop을 소개할 페이지도 기존 페이지와 같은 느낌으로 생성하여서 연결해두었습니다.

또한 이미지도 가져와서 삽입하면서 최종 꾸미기 진행하였습니다.

(이상하게 특정 페이지에서 알아서 이미지를 가져오도록 하는 건 잘 안되네요.. 혹시 성공하신 분 계시다면 노하우 부탁 드립니다! ^^)

한 가지 유의할 점은, 분명히 같은 포맷으로 만들어 달라고 하였음에도 누락하거나 다른 단어를 사용하는 경우가 종종 발견되었습니다.

또한 하나의 명령을 주어서 실행할 때, 전혀 무관한 부분까지 건드리면서 원치 않는 수정을 추가로 진행하는 것도 몇 번 경험하였습니다.

이때마다 직접 다시 원래대로 원복 해달라고 상세히 콕 찝어서 설명해주어야 합니다....

해당 부분은 점차 개선이 되기를 바라면서...

최종적으로는 아래와 같이 완성하였습니다. (참고로, 해당 수정을 진행하면서 제가 코드를 직접 수정한 부분은 하나도 없습니다!)

누가 봐도 초보가 만든 것 같지만.... HTML 문법조차 모르는 저에게는 이 정도면 나름 선방인 것 같습니다 (^-^;;)

이제 이 페이지를 직접 웹 서버에 올려보는 것까지는 해봐야겠죠!

제가 직접 웹 서버나 데이터베이스를 구축하는 것은 현재로서는 무리인 관계로

우선은 무료로 웹 호스팅을 제공해주는 업체에 올려볼 수 있도록 하겠습니다.

CH 5. 서버로 업로드

앞서 잠깐 말씀 드린 것과 같이, 웹 서버나 데이터베이스 서버는 웹 호스팅 업체가 제공하는 것을 그대로 활용하려 합니다.

그런데 제가 Cursor AI로 만든 HTM & CSS & Java Script file을 단순 업로드만 하면 된다? 라는 개념은 아닌 듯 하네요.

서버에 파일을 올리려면 FTP 프로그램이 필요하다고 합니다.

FTP 프로그램은, Cursor AI에서 extension으로 등록되어 있는 FTP Mini를 활용해보도록 하겠습니다.

VS Code에서 Extension 설치할 떄 와 유사한 방식으로, Cursor 내의 Extension에서 FTP Mini를 설치하여 사용하겠습니다.

이제 설치 후, FTP Mini: 연결 설정 (f1 키 누르고 입력) 을 선택하여

제가 웹 호스팅 서비스를 통하여 생성한 저의 FTP 서버 주소를 입력해주겠습니다. (참고로, https 는 입력하면 안된다고 하네요~)

이어서 FTP 계정의 사용자 이름과 비번까지 입력하고, 제 홈페이지가 들어갈 홈 폴더의 이름까지 설정해주면 마무리 입니다 (저는 default로 나온 /html을 그대로 활용하였습니다)

아래에서 setup-finish.html file 은 제가 잡은 웹 서버의 파일을 자동으로 가져온 것이므로 무시하셔도 좋습니다!

해당 FTP Mini Extension을 활용함으로서, 제가 잡아준 dir과 제 웹 호스팅 서버가 서로 동기화 되었습니다.

이제 제가 앞서 Cursor를 통하여 제작한 HTML file들을 이곳 dir으로 옮기도록 하겠습니다.

html 및 기타 파일을 옮긴 후, 각 파일들에 대하여 ctrl + S 를 눌러주면, 가져온 파일들이 웹 서버로 동기화 되기 시작합니다!

그리고 제 웹페이지 주소로 접속해보면...

아래와 같이 드디어 저만의 웹을 구현할 수 있게 되었습니다!!!!!

CH 6. Wrap Up & 후기

오늘은 이렇게 Web 및 개발 문외한이 Cursor AI의 도움 만으로도 스스로의 web을 만들 수 있음을 확인해보았습니다.

해당 프로젝트는 앞서 언급한 것처럼

서승완 님의 도서: 커서 AI 트렌드 & 활용백과를 참고하여 진행하였습니다.

* 혹시 저작권에 문제가 발생할 경우, 바로 수정할 수 있도록 하겠습니다.

이번 프로젝트를 진행하면서, cursor 라는 tool이 빠르게 결과물을 실현시켜 줄 수 있는 tool이라는 인상을 받았습니다.

하지만 결국 본인이 해당 domain에 대한 지식이 없을 경우, Cursor에게 끌려다닌다는 느낌이 때때로 드는 건 지울 수 없었습니다.

진행되고 있는 방식이 바른 방식이 맞는지.. .코드가 누더기처럼 변하는 건 아닌지 에 대한 확신이 없는 채로 진행하는 느낌?

물론, cursor 측에서는 각 실행마다 code의 변경 점을 모두 표시해주기에, 숙련자는 원하는 개발 의도대로 생성되고 있음을 충분히 확인은 가능하실 것 같습니다.

어디까지나 개발 문외한의 주관적인 느낌이라는 점 참고 부탁 드립니다 :D

그럼에도 불구하고, 입문자에게 있어 자신의 결과물이 눈에 빠르게 보인다는 점은 매우 강력한 동기부여가 되어주죠.

앞으로도 Cursor를 활용하면서, study나, project에 적극적으로 활용할 것 같네요!

pro plan도 구독을 시작해야겠습니다 ㅎㅎㅎ

부족하지만 긴 글 읽어주심에 감사드리면서,

혹시 보완이 필요한 부분이나, web 및 데이터베이스 서버 구현과 관련하여 문외한에게 추천해주실 만한 자료가 있다면. 많은 조언과 가르침 부탁 드립니다!

감사드립니다.