윈드서프 AI로 홈페이지 만들기

윈드서프를 사용하며 느낀 점은 이제 홈페이지 제작이 정말 쉬워졌다는 것인데요.

맹점들도 존재하지만 개발경험이 없는 일반인 입장에서
약간 따라하는 것만으로 가벼운 홈페이지를 구축할수 있다는 것은 큰 매력입니다.
참고로 커서 AI도 유사합니다.

AI개발로 따라하는 홈페이지 개발, 시작해 볼까요?
회원가입, 게시판 등의 기능을 넣는 것도 가능하나 이를 위해서는 데이터베이스 관련 IT 지식을 알아야 합니다.
그러니 오늘은 가벼운 보여주기용 홈페이지를 쉽게 만드는 법을 알아보겠습니다.

윈드서프 에디터 설치

윈드서프 AI는 한글이나 엑셀처럼 컴퓨터에 설치, 사용하는 프로그램입니다.
아래 사이트에서 DOWNLOAD the Windsurf Editor 버튼을 클릭, 다운받아 설치하시면 되는데요.
사전 작업으로 한번만 진행하시면 됩니다.https://windsurf.com/

다운로드 프로그램을 선택하는 화면이 한번 더 나오는데, 일반 가정용 컴퓨터에서 사용하는 윈도우OS라면 Download for x64를 선택하시면 됩니다.

설치 과정은 한글로 보이기 때문에 약관동의 선택, 다음, 다음, .. 버튼을 눌러 설치를 진행하시면 됩니다.

윈드서프 에디터 시작

설치가 끝난 다음에는 시작버튼을 눌러 아래 모양 아이콘을 클릭하시면 되는데요.

보통 아래 비슷한 화면이 보이실 겁니다. 기본바탕은 어두운 색의 다크 테마인데요.

밝은 테마를 원하시면, Ctrl + K, Ctrl + T 단축키를 입력하여 테마를 변경하실 수 있습니다.
이 작업 또한 한번만 해주시면 됩니다.

크레이는 흰색을 선호하기에, Light - Modern 으로 변경해 사용하고 있습니다.

폴더 열기 및 기본 세팅

윈드 서프 에디터는 하나의 폴더가 마치 하나의 엑셀 문서인 것처럼 작업을 진행하는데요.
먼저 윈도우 탐색기에서 폴더 하나를 만들고,

윈드서프 에디터에서 File - Open Folder 메뉴를 선택하여 해당 폴더를 선택하시면 됩니다.

그러면 Explorer 영역에 선택한 폴더가 위치하는데요. 이제 본격적으로 홈페이지를 만들 준비가 된 것입니다.

간편함의 극치 윈드서프 룰 설정

윈드서프에게 코딩을 지시하려면 그냥 채팅으로 바로 지시해도 되나,
윈드서프 룰(Rule:규칙)을 미리 설정하면 훨씬 빠르게 목표점에 도달할 수 있습니다.
폴더명 우측 첫번째 아이콘은 '새 파일 만들기' 입니다.
이 아이콘을 선택하고 파일명을 다음과 같이 입력하세요. ( 입력 후 Enter )

.windsurfrules

파일이 자동으로 열릴 것입니다.

아래 내용을 복붙하고 Ctrl + S 키를 눌러 저장하세요. 그러면 끝입니다.

- 모든 답변은 한글로 작성해줘.
- 이미지를 넣을 경우 picsum 에서 랜덤하게 가져와줘.
- 아이콘을 넣을 경우 Google 의 Material Icons 를 사용해줘.
- css 는 tailwindcss 를 사용해줘.

만일 차후에라도 원하는 내용이 있으시다면 내용을 추가해 넣어주면 이후 작업에 반영합니다.

채팅창 열고 AI 모델 선택

이제 AI에게 지시할 차례입니다.
만약 채팅창이 열리지 않은 경우 Ctrl + L 키를 누르면 열리는데요.

먼저 AI 모델을 잘 선택하는게 중요합니다.
제가 테스트해본 바로는 클로드 3.7 소넷 (Claud 3.7 Sonnet) 모델이 성능이 좋습니다.
크레딧이 1개씩이나 소진되는 단점은 있지만 성능대비 가성비가 좋은 편입니다.
( 참고 : 무료 유저는 한달에 25크레딧 제공 )
AI모델들이 서로 경쟁하듯이 발전하고 있어 추후에 더 나은 모델이 등장할지도 모릅니다.

홈페이지 만들기 시작!

이제 홈페이지를 만들어 보죠. 홈페이지 주제를 하나 정하면 되는데요.
'지구 환경보호'를 주제로 하는 홈페이지를 구성하도록 하겠습니다.
메뉴 구성은 어떻게 하고 등등 세부 사항같은 기획은 다른 AI의 도움을 받아도 되나,
윈드서프가 클로드 소넷 모델을 통해 어디까지 해내는지 보여드리기 위해 아래 문구만 입력해 보겠습니다.

지구 환경보호 홈페이지를 만들어줘.

중도에 아래와 같은 창이 등장하면 Accept(수락) 버튼을 눌러 주세요.

홈페이지를 모두 만든 후 Accept All(모두 수락) 버튼을 눌러주시면 됩니다.

아래와 같이 다 만들었다는 안내 문구가 표시되네요.

홈페이지 구경하기

이제 금방 만들었던 폴더를 열어 index 를 찾아 더블클릭하시면 되는데요.

윈도우 탐색기를 닫으셨다면 좌측 Explore 창에서 index.html 파일을 마우스 우클릭하여 Reveal in File Explore 를 선택하셔도 폴더가 열립니다.

아래와 같은 홈페이지가 완성되었습니다.
여러분은 저와 결과 화면이 다를 수 있습니다.

홈페이지 수정하기

이미지가 일부 보이지 않는 부분이 있지만 디자인은 양호한 편입니다.
우선 로고 이미지부터 제작해 보죠.채팅 창에 아래 내용을 요청합니다.

로고 이미지가 안 뜨는데 녹색 새싹의 로고 이미지를 만들고 홈페이지에 넣어줘.

뭔가 진행하더니 아래와 같이 적용한 것을 볼 수 있습니다.

이제 이미지들이 안 뜨는 나머지 부분을 해결하겠습니다.

안 보이는 이미지들이 많은데 picsum 에서 가져와 모두 채워줘.

결과는 아래와 같은데요. 타이틀 부분의 배경이라든가, 곳곳의 빈 이미지들을 채운 것을 볼 수 있습니다.

메뉴 구성은 AI가 알아서 넣어준 것이라 의도한게 아니라고 가정하고 변경하도록 하겠습니다.
메뉴 이름은 띄어쓰기가 있을 수도 있으니 AI가 이해하기 쉽게 따옴표로 묶어주는게 좋습니다.

메뉴 구성을 변경했으면 하는데, '소식', '연락처'를 빼고 '환경보호 기관'을 넣어줘.

'환경보호 기관' 메뉴를 추가한 것뿐 아니라, 해당 메뉴 클릭시 환경 보호 기관에 관련한 내용까지 구성한 것을 확인할 수 있습니다.

세부적인 문구 수정 등은 AI에게 시키기보다는 index.html 파일을 직접 수정하는게 낫습니다.
왼쪽 index.html 파일을 더블클릭하면 파일이 열리는데요.

Ctrl + F 키를 누르면 검색란이 표시됩니다.
여기서 문구를 검색해서 수정 후, Ctrl + S 키를 눌러 저장하시면 됩니다.

사용한 문구 목록을 취합하면 아래와 같습니다.
몇줄 안되지요?

지구 환경보호 홈페이지를 만들어줘.
로고 이미지가 안 뜨는데 녹색 새싹의 로고 이미지를 만들고 홈페이지에 넣어줘.
안 보이는 이미지들이 많은데 picsum 에서 가져와 모두 채워줘.
메뉴 구성을 변경했으면 하는데, '소식', '연락처'를 빼고 '환경보호 기관'을 넣어줘.

다시 다른 폴더를 만들어 첫번째 줄만 입력하니 또 다른 새로운 디자인이 나왔습니다.
아이콘도 이미지도 이번에는 한번에 제대로 나왔네요.

한가지 더 재미있는 걸 시도하겠습니다. 전반적인 디자인을 바꿔볼께요.
이 부분은 꽤 시간이 걸려서 따라하셔도 되고 안하셔도 됩니다 :)

디자인을 옥션(auction.co.kr) 사이트 스타일로 바꿔주고,
메뉴마다 아이콘을 넣어줘.

약간 수정할 부분은 있지만, 디자인을 송두리째 바꿔버리는 이런 기능, 캬~ 멋집니다.
비록 기능적인 부분은 없지만, 간단한 몇줄의 문장으로 예쁘장한 홈페이지를 만들수 있다니 흥미롭지 않으신가요? :)
필요하신 분께 도움이 되셨나 모르겠습니다.
오늘도 방문해주신 분들께 감사드립니다.