본문 바로가기

Project14

티스토리 블로그 꾸미기 (1) 최근 학교에서 나갔던 인턴 기간이 끝나며 나도 드디어 종강을 하게 되었다. 그래서 이 방학기간동안 티스토리 블로그 스킨을 만들어 보려고 한다. 이쁘게 만들면 내 포트폴리오가 되는거고 아니면 그냥 실력 쌓았다고 생각하면서 무지성 시작을 했다. 그런데 시작하자마자 디자인을 어떻게 해야할지 멘붕이 왔었다. 그래서 여러 사람들의 티스토리를 보며 영감을 얻어야겠다고 생각했다. 블로그를 정말 예쁘게 꾸민 분들도 많았고, 다른 사람들이 사용한 방법을 보며 여러 디자인을 생각해 보았다. 나는 내가 사용할 수 있는 기술들을 블로그에 조화롭게 넣는 것을 목표로 프로젝트를 시작했다. + 기본 스킨은 Odyssey를 사용했습니다. 초기 디자인 먼저 디자인 툴을 하나도 다루지 못해 냅다 ppt로 시작했다. 그 때는 포인트 색을.. 2024. 1. 3.
[ChatGPT] 명언만들기 회사에서 남는 시간을 이용해서 간단한 명언만들기 웹사이트를 만들어보았다. 사실 서버와 클라이언트를 연결하는 방법을 잘 몰라서 일단 하면서 배우자는 생각으로 했던거였는데 생각보다 금방 만들 수 있어서 재미있었다. 먼저 간단한 설명으로는 서버에서는 GPT api를 이용해서 검색어와 비슷한 명언을 만들어 달라고 요청한 뒤 프론트에 전송하고 프론트에서는 띄우는 간단한 웹사이트이다. 미리보기 간단한 원리는 아래 그림과 같다. 클라이언트가 검색어를 입력하면 서버에서 GPT에게 프롬프트를 추가해 GPT로 보낸다. 그 후에는 GPT에서 보낸 대답을 서버를 통해 클라이언트에 나타내게 된다. 다음은 실행 코드이다. Front (HTML) 띵언 만들기 \ Sidebar Dashboard Support About Logout.. 2023. 9. 18.
파이썬을 이용한 리듬게임 만들기 앞서 종합 아케이드 게임기를 만들며 리듬게임을 만들어 보았다. 사실 그렇게 완성도도 높지 않고 아직 허술하지만 팀원과 함께 만들면서 재미도 있었고, 많은 노력이 들어갔던 만큼 완성했을 때 뿌듯함도 있었다. 그런데 노래선택을 할 수 없고, 메인 창이 없어서 되돌아가기도 못하기 때문에 그렇게 완성도 있는 작품이라고 하기엔 조금 허술한 점이 있다. 먼저 가장 핵심이 되는 노트가 내려오는 타이밍은 파이썬의 라이브러리인 librosa를 사용했다. 이 라이브러리를 사용하면 음악의 특징을 뽑아내서 템포에 맞춰 노트를 생성하는게 가능하다. 여기서 추가로 음의 변화에 따라 노트를 생성하고 싶었는데 라이브러리에 미숙한 탓인지 실패했다. 다음은 내가 코드를 작성했던 순서이다. 1. 노트가 내려오는 트랙 그리기 2. 노트 클.. 2023. 6. 21.
라즈베리 파이를 이용한 게임기 만들기 드디어 어제 종강을 했다. 그동안 기말 프로젝트 때문에 시간도 없고 블로그도 안쓴지 너무 오래되어서 이번 기말 프로젝트로 만들었던 게임기를 포스팅해보려 한다. 하드웨어는 라즈베리파이와 스크린을 이용해 화면을 구성했고 스피커를 달아 사운드를 추가했다.. 또 게임기의 핵심인 컨트롤러는 3D 프린터를 이용해 외관을 구성하고 내부는 버튼, 조이스틱, LED 로 꾸몄다. 처음엔 위 사진처럼 빵판을 이용해서 사용하려 했는데 자꾸 선이 빠지기도 하고, 갑자기 발표 전날에 빵판 한 줄이 먹통이 되는 바람에 급하게 납땜을 했다. 또 라즈베리파이 특성상 아날로그 입력이 안되는데, 교수님이 만드신 X-bot 엣지보드를 이용해 조이스틱의 아날로그 입력을 가능하게 했다. 다음은 게임 알고리즘인데, 테트리스와 리듬게임의 이미지는.. 2023. 6. 21.
Chat GPT API를 이용한 오늘 뭐입지? 만들기 GPT API를 이용해 오늘 입을 옷을 추천해주는 AI를 만들어 보았다. 사실 내가 한것보다 조코딩 님의 강의를 따라한거라고 봐도 되겠지만 아무튼 다 만들고 나니 뿌듯함도 있었다. 미리보기 이 사이트를 만들며 가장 어려웠던 점은 백과 프론트의 연결이였다. 나는 GET과 POST 방식에 대해서도 잘 몰랐었고, 어떻게 프론트와 백을 연결하는지 잘 알아보지 않아서 어려움이 조금 있었다. 아무튼 서론은 여기까지 하고 사이트에 대한 리뷰를 해보려한다. 먼저 해당 사이트 링크는 https://jaehwis-pj.pages.dev/ 이며 동작 원리, 사용된 API, 배포까지의 과정을 간단하게 포스팅하겠다. ※ CHAT GPT API 사용법에 대한 자세한 글은 여기에 있으니 참조바람 작동방식 Chat GPT API 연.. 2023. 4. 3.
Chat GPT API 사용법 며칠 전 유튜버 조코딩 님이 chat gpt를 이용한 챗도지 만들기를 실시간 강의로 하신 적이 있었다. 나도 GPT API를 사용해보고 싶었는데 어떻게 해야 할지 감을 못 잡고 있던 차에 좋은 강의가 있어 바로 들어가서 따라해 봤다. 강의는 정말 초보자도 따라만 하면 될 정도로 쉬웠고 잘 가르쳐 주셔서 쉽게 이해할 수 있었다. 이 글을 읽어도 이해가 가질 않는다면 조코딩님의 강의를 듣는것을 적극 추천한다. 아 시작하기에 앞서 api에 대한기초내용은 이전 글에 포스팅해놓았으니 참고하면 좋을 것 같다. 그리고 백엔드는 node.js 프론트는 html, css, js만 사용했다. API KEY 발급 가장 중요한 KEY는 GPT 홈페이지에서 발급 받을 수 있으며 삭제도 가능하다. 하지만 처음 발급 때 보여주는 .. 2023. 3. 27.