본문 바로가기
책 너머 인사이트/생성형 AI

Perplexity AI의 핵심 기능: 검색부터 웹페이지 제작까지 완벽 가이드 II

by 책 너머 인사이트 2024. 10. 2.

목차

    반응형

    이전 포스팅에 이어 Discover 사용법과 웹페이지 제작하는 법을 알려주고자 한다. 

     

    2024.10.01 - [책 너머 인사이트/생성형 AI] - Perplexity AI의 핵심 기능: 검색부터 웹페이지 제작까지 완벽 가이드 I

     

    Perplexity AI의 핵심 기능: 검색부터 웹페이지 제작까지 완벽 가이드 I

    Perplexity AI는 다양한 기능을 제공하는 강력한 AI 도구로, 사용자가 빠르고 정확하게 정보를 찾을 수 있도록 돕는 것은 물론, Perplexity AI를 사용하면 실시간 정보 바탕으로 여행계획짜기, 그리고 웹

    booknbeyondinsights.tistory.com

     

    Perplexity AI 기본 사용법과 프로 버전 무료 사용법은 다음 포스팅을 확인하면 된다.

     

    2024.09.05 - [책 너머 인사이트/생성형 AI] - 퍼플렉시티(Perplexity AI) 프로 무료 사용법

     

    퍼플렉시티(Perplexity AI) 프로 무료 사용법

    2024.09.04 - [책 너머 인사이트/IT&인공지능] - 퍼플렉시티(Perplexity AI) AI 검색엔진SK텔레콤 9월 4일 미국의 생성형 인공지능(AI) 검색 엔진인 '퍼플렉시티'(Perplexity)의 프로 버전을 가입자들에게 1년간

    booknbeyondinsights.tistory.com

    2024.09.05 - [책 너머 인사이트/생성형 AI] - 퍼플렉시티 AI(Perplexity AI) 사용 방법

     

    퍼플렉시티 AI(Perplexity AI) 사용 방법

    퍼플렉시티 AI 간략 소개Perplexity AI는 실시간 웹 검색과 AI 기술을 결합해 사용자의 질문에 대해 정확하고 최신의 정보를 제공하는 대화형 검색 엔진이다.퍼플렉시티 AI 상세 사용법기본 검색 방

    booknbeyondinsights.tistory.com

    Discover 사용법

    Perplexity AI의 Discover 기능을 사용하면 다양한 주제와 최신 트렌드를 탐색할 수 있다.

     

    1. 좌측 [Discover]을 클릭한다.

    perplexity ai pro

    2. 최신 트랜드를 검색한다.

    3. 관심 분야도 저장할 수 있다. 

    perplexity ai pro

     

    4. 내가 보는 기사에 궁금한 점이 있으면 후속 질문을 할 수 있다.

    perplexity ai pro

     

    참고로, 설령 내가 단어를 잘 못 적었어도 맥락에 맞게 척척 답변해준다. ('고소'를 '검색'으로 잘 못 적었는데도, '고소'로 검색해준다)

    perplexity ai pro

     

    perplexity ai pro

     

    웹페이지 만드는 법

    Perplexity ai로 웹페이지도 만들 수 있다. 

     

    우선, Visual Studio Code (무료)를 다운로드 받는다. 

    https://code.visualstudio.com/

     

    Visual Studio Code - Code Editing. Redefined

    Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

    code.visualstudio.com

     

    1. Perplexity ai에서 [Focus]를 [Web]으로 세팅 한 후, 다음과 같이 프롬프트를 넣어 웹페이지를 만들어 달라고 한다. 그러면 HTML, CSS, JaveScript 파일을 각각 만들어 준다. 

    [AI 트렌드 알려주는] 한국어 웹사이트 만들어줘
    - 홈
    - 소개
    - 서비스
    - 연락
    vanilla js, css, html 사용해서 만들어줘.
    실행법과 편집법 알려줘.

    perplexity ai pro

     

    2. 다음과 같이 프로젝트 구조와 각각의 파일을 생성해준다. 

    ai-trends-website/

    ├── index.html
    ├── styles.css
    └── script.js

     

    3. 바탕화면에 새 폴더를 만든 후 Visual Studio Code에서 [File] < [Open folder...]를 차례로 클릭 후, 만든 폴더를 클릭한다.

    perplexity ai pro

     

    4. Visual Studio Code 에 .html, .css, .js 파일로 이뤄진 프로젝트를 만들고, 생성한 .html, .css, .js 파일에 Perplexity ai 에서 생성한 파일 콘텐츠를 복사해서 붙여넣기 한다. (Ctrl+V 후 Ctril+S를 하면 저장된다.)

    perplexity ai pro

     

    perplexity ai pro

     

    5. 폴더에서 [index]를 더블 클릭하면, 만들어진 웹페이지가 보인다.

    perplexity ai pro

     

    6. 만들어진 웹페이지가 마음에 안 든다면, Perplexity ai에게 다음과 같이 Best UI 웹 사이트 찾아서 스타일 참조 해달라고 한다. (이런 이유로  Focus 를 Web으로 세팅해두었다.)

    best ui 웹사이트 찾아서 그 웹사이트 스타일 참조해줘.

     

    7. 그러면 뛰어난 웹사이트 참조해서 다시 개선한 코드를 준다. 4번과 같이, 새로 만들어진 코드를 복사해 Visual Studio Code 에 .html, .css, .js 파일에다 다시 붙여넣는다. (Ctrl+A로 전체선택 후 Ctrl+V를 해서 저장 후 Ctrl+S로 저장한다.)

     

    8. 다시, 폴더에서 [index]를 더블 클릭하면, 개선된 웹페이지를 확인할 수 있다.

    perplexity ai pro

     

    결론

    Perplexity AI로 검색부터 웹페이지 제작하는 법까지 알아보았다. (참고로, 여기서는 만든 웹페이지를 publish하는 방법까지는 다루지 않았다.)

    Perplexity AI로 할 수 있는 건 무궁무진하니 바로 시작해보자. 

    반응형
    • 트위터 공유하기
    • 페이스북 공유하기
    • 카카오톡 공유하기