기업 소개 웹 사이트 만들기

 

왼쪽 사이드바: 파일 탐색기 / 코드 관리 / 확장 도구 관리 창

오른쪽 사이드바: 커서 LLM 채팅탕

아래쪽 사이드바: 터미널

가운데 화면: 코드를 입력하는 코드 편집 화면

 

오른쪽 사이드바에 위치한 채팅방에는 여러 버튼이 있는데 + 버튼과 @Add context입니다.

 

+ 버튼: 챗 GPT와 같은 서비스에서 볼 수 있는 '새 채팅방 열기' 가능입니다. 만약 대화를 진행하다 원하는 답변이 나오지 않으면 버튼을 눌러 다시 채팅을 진행하면 됩니다.

@Add context: 파일이나 폴더, 웹 문서를 여기에 포함시키는 기능입니다. 추가한 파일이나 폴더 등 해당 콘텍스트를 바탕으로 커서가 답변합니다.

 

왼쪽 사이드바에서 [Open Folder]를 눌러 앞으로 실습한 폴더 cursorstudy를 원하는 위치에 만든 다음 [열기]를 눌러 해당 폴더를 엽니다.

그런 다음 왼쪽 사이드바의 cursorstudy 폴더에서 마우스 오른쪽 클릭을 한 다음 [New File]을 눌러 test.html이라는 파일을 하나 만듭니다.

파일이 생성되며, 중앙에 test.html 파일을 수정할 준비가 됩니다. 오른쪽 채팅방을 보면 [@Add context]에 @ test.html 파일이 포함된 것을 확인할 수 있습니다.

 

커서의 컨텍스트를 이용해서 채팅방을 통해 간단한 직업을 시켜보겠습니다.

간단한 기업 소개 웹 사이트를 원 페이지로 구성해 줄래? 흔한 디자인이어도 상관없어.

 

요청한 작업을 토대로 커서가 파일을 추가하고 코드를 작성하기 시작합니다. 작성한 코드에 대해서도 자세히 설명해줍니다.

 

가운데 화면을 보면 임시로 코드가 입력되어 있고, 위에 작은 버튼들이 표시됩니다. 여기서 [Undo]를 누르면 현재 작성한 코드를 거절하는 것으로 파일에 반영되지 않으며, [Keep]을 누르면 현재 작성한 코드가 파일에 그대로 반영됩니다. [Keep]을 눌러서 허락해줍니다. 

 

이제 파일을 웹 브라우저에서 열어보세요.

 

배경에 기업 소개와 어울리는 적절한 이미지를 투명도 50%로 해서 기업 소개 이미지를 배경으로 깔아달라고 하고 수정해 봅시다.

배경으로 추가할 이미지 주소를 복사한 뒤 부탁해 보겠습니다.

https://img.hankyung.com/photo/201808/AA.17531310.1.jpg 이미지를 기업 이미지 배경으로 50% 투명도로 깔아줘.

 

그러면 커서가 배경으로 해당 이미지로 변경하고 투명도를 50%로 설정했다고 합니다.

Keep를 눌러 적용하고 다시 test.html을 웹 브라우저에서 열어봅니다.

 

배경에 이미지가 깔렸고 텍스트가 보이도록 투명도가 50%로 잘 반영되어 정확하게 수정되었습니다.