무작정 따라하고 응용하고 결과내기

AI를 사용해서 뭐라도 만들었어.
내가 만든 결과물을 공유할게!
과정, 결과물, 배운점 위주로 적었어.

일기장 웹페이지 만들기 | ChatGPT, Replit

활용한 사이트 : ChatGPT(유료) , Replit(무료) 소요시간 : 1시간 결과물 : GPT 프롬프트 , 일기장 목표 : 2024년 7월 달력에 일기장 만들기 결과물 내가 쓴 첫 프롬프트는 이거야. 아주 상세히 설명할 것 나는 큰 구조도를 그리면서 설명했어. 전체 구성 = 홈 화면 + 일기 쓰는 화면 홈 화면: -홈화면 특징1 -홈화면 특징2 일기쓰는 화면: -일기쓰는 화면 특징 1 -일기쓰는 화면 특징 2 페이지 마다 있는 모든 것들을 하나하나 설명했어.

해이든

2024/07/17 7:15 PM

해이든

무작정 따라하고 응용하고 결과내기

일기장 웹페이지 만들기 | ChatGPT, Replit

해이든

Jul 17, 20245m

활용한 사이트 : ChatGPT(유료) , Replit(무료)

소요시간 : 1시간

결과물 : GPT 프롬프트 , 일기장

목표 : 2024년 7월 달력에 일기장 만들기

https://prod-files-secure.s3.us-west-2.amazonaws.com/c0ef42cb-f00d-4128-90f5-10d576e594e5/92a8b1fa-d51b-4c36-a268-a83304e4a2eb/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA_2024-07-09_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_8.40.33.png

prod-files-secure.s3.us-west-2.amazonaws.com

홈 화면

일기 쓰는 화면

결과물

내가 만든 홈화면!

내가 만든 일기!

내가 쓴 첫 프롬프트는 이거야.

Flask로 Replit DB를 활용하여 일기장 웹페이지를 개발해줘. 

화면 구성
- 메인 화면은 제목과 달력으로 구성되어 있어.
제목은 'My Diary'야. H2와 Bold처리해서 써줘.
달력은 2024년 7월 전체의 날짜가 표 형식으로 되어 있어. 표의 가장 윗줄은 요일 영어로 써줘. 
2024년 7월 1일부터 2024년 7월 31일까지 표에 칸칸이 날짜별로 써줘.

- 사용자가 한 날짜를 클릭하면 해당 날짜 일기 페이지로 이동해.

- 일기 페이지는 제목, 텍스트 박스, save 버튼, 메인화면으로 돌아가는 버튼 으로 구성되어 있어.

제목은 'Diary Entry for 해당 날짜'야. H2와 Bold처리해줘. 
###ex) Diary Entry for 2024-07-03###

텍스트 박스는 사용자가 텍스트를 입력하는 곳이야. 테두리에 파란색 줄이 쳐져 있게 해줘.

save 버튼은 'save'라고 쓰고, 박스 형식이야. H4로 만들어줘. save 버튼을 누르면 DB에 저장해야해. 저장시 사용자가 다시 해당 날짜를 누르면 전에 써둔 일기가 텍스트 박스 안에 적혀있어야해.

메인화면으로 돌아가는 버튼은 'Back to Calender' 라고 쓰고, 밑줄쳐줘. H4로 만들어줘. 사용자가 이 버튼을 누르면 메인 화면으로 돌아가야해.

아주 상세히 설명할 것

나는 큰 구조도를 그리면서 설명했어.

전체 구성 = 홈 화면 + 일기 쓰는 화면

홈 화면:
-홈화면 특징1
-홈화면 특징2

일기쓰는 화면:

-일기쓰는 화면 특징 1

-일기쓰는 화면 특징 2

페이지 마다 있는 모든 것들을 하나하나 설명했어.

예를 들어, 홈 화면의 My Diary 를 설명해볼게.

기능은? : 제목

어떻게 생겼어? : "My Diary" 라고 쓰고, 크기 = H2, 두께 = Bold

(색이나 글씨체를 바꿀 수도 있어)

하나 더 예를 들면, 일기 쓰는 화면의 Back to Calendar 를 설명해볼게.

기능은? : 버튼

어떤 버튼인데? : 누르면 홈 화면으로 돌아가야해.

어떻게 생겼어? : "Back to Calendar" 라고 쓰고, 크기 = H4, 두께 = Regular, 밑줄치기

데이터베이스를 쓰기 위해 "Flask 로 Replit DB 를 활용하여" 라는 말을 꼭 넣었어.

데이터베이스는 저장 파일이라고 생각하면 된대.
7월 1일에 쓴 일기는 → 7월 1일에 저장되어야 하고,
7월 2일에 쓴 일기는 → 7월 2일에 저장되어야 하니까
데이터베이스가 필요하대 (정확히는 잘 몰라 😛)

다음에 쓴다면 이렇게 쓰려고 해.

Flask로 Replit DB를 활용하여 일기장 웹페이지를 개발해줘. 

#화면 구성
  메인화면, 일기쓰는화면

##메인화면
  제목 + 달력

  ###제목
    "My Diary" 라고 쓰고, H2와 Bold 처리해줘.
    메인 화면의 왼쪽 위에 써야해.

  ###달력
    달력은 2024년 7월 달 전체가 나타나있으면 돼.
    표 형식으로 구현해줘. 
    표의 가장 윗줄은 요일을 영어로 적어줘. 일요일부터 시작하게 해줘.

    사용자가 한 날짜를 클릭하면 해당 날짜의 일기쓰는 화면으로 이동해야해.

##일기쓰는화면
  제목 + 텍스트박스 + 저장 버튼 + 메인화면으로 돌아가는 버튼

    ###제목
      "Diary Entry for 해당 날짜"라고 쓰고, H2와 Bold 처리해줘.
      ex) Diary Entry for 2024-07-04
      화면 왼쪽 가장 위에 써줘

    ###텍스트박스
      사용자가 텍스트를 입력하는 곳이야. 
      사각형 모양이고, 테두리에 파란색 줄이 쳐져 있게 해줘. 
      가로 길이는 전체 페이지의 30%
      세로 길이는 150px
      테두리 두께는 2px
      제목 아래에 써줘.

    ###저장버튼
        "Save" 라고 쓰고, 박스로 된 버튼이야. 
        H4로 써줘.
        사용자가 이 버튼을 누르면 해당 날짜 DB에 저장해야해. 
        저장시 사용자가 다시 해당 날짜를 누르면 전에 써둔 일기가 텍스트 박스 안에 적혀있어야해.
        
    ###메인화면으로 돌아가는 버튼
        "Back to Calendar" 라고 쓰고, 밑줄쳐진 버튼이야.
        H4로 써줘.
        사용자가 이 버튼을 누르면 메인 화면으로 돌아가야해

배운 점

이번에 처음으로 ChatGPT에 쓰는 방법을 배웠거든

"#" 은 대제목

"##"은 중제목

"###"은 소제목

이걸 활용해서 구조를 써주면, 얘가 더 잘 이해할 것 같아.

GPT가 쓴 코드들을 읽어보니까, 다음에 디자인 할 때 이런 걸 고려해야 할 것 같아.

텍스트

옆에 회색으로 쓴 말은 '캡션'이래. 코드는 아니고, 그냥 설명?

텍스트박스 만들 때, 이런 걸 생각해야 하나봐.

width 가로 = 30% (전체 페이지의 30%를 요청할 수 있음)

height 세로 = 150px (저 정도가 150 픽셀, 아래로 더 페이지가 있다고 치면 아무튼 저정도)

border 테두리 = 2px (테두리 선의 크기도 정할 수 있는 듯)

버튼

아래 Save 버튼 만들고 나온 코드야.

버튼 만들 때, 이런 걸 생각해야 하나봐

display ?
padding ?
text-align 텍스트 위치 : 박스 안에서 center 에 있게 (왼,오,위,아래도 요구할 수 있을듯)
text-decoration 텍스트 꾸미기 : (색, 글꼴,.. 또 무슨 선택지가 있지)
background-clolr 버튼 배경색
border 버튼 테두리 두께
line-height ?

link 는 아마 눌렀을 때 표시 같아.
눌렀을 때, 색이 blue 가 됐었어.

cursor ?

이 이미지를 참고해서 공부해보ㅘ.. 난 모르겠어 ^_^

응용 계획

Dan Koe의 하루 스케줄표

다음은 이걸 만들어 볼 생각이야.

당일 날짜

아침 감사인사 + 쓰는 칸

나의 업무 표 + 집중하는 목표 / 우선 업무 / 다른 업무 + 쓰는 칸

하루 스케줄표 + 시간 + 쓰는 칸 - 구글 캘린더랑 연동되면 좋겠다 (짱 어렵겠다;)

모닝 루틴 + 미리 적어놓은 루틴 + 했는지 체크 - 루틴 어플이랑 연동되면 좋겠다

쇼핑 리스트 + 쓰는 칸 + 샀는지 체크 - 미리알림 이런거랑 연동되면 좋겠다

밤에 든 생각들 + 쓰는 칸

무작정 따라한 것

한결님이 주도하는 ai를 활용하여 나만의 앱 만들기 스터디에서 만들었어!

덕분에 Replit 이란 사이트에서 할 수 있었고, Replit DB를 사용하는 걸 배웠어.

한결님에게 받은 피드백은 이랬어.

달력을 요청할 때 자세하게 요청하지 말 것

나 : 2024년 7월 1일부터 31일까지 나타내줘.

피드백 : 사용자가 들어오는 날짜에 해당하는 달을 나타내줘 라고 뭉뚱그려서 말하는 게 훨씬 좋다.

(다른 내용들은 자세하게 GPT에게 알려주는 게 좋지만, 이것 뭉뚱그려서 알려주는게 좋대. 왜지? 모르겠어)

save 버튼을 누르면 화면이 깜박인다.

피드백 : savs 버튼을 누르면 다시 로딩이 되어 깜박이는 현상이 일어난다. 이 부분을 깜빡거리지 않게 수정하는 게 좋을 것 같다.

(아직 안해봤어. 해보고 공유할게)

< 제목은 'My Diary'야. H2 와 Bold 처리해줘 > 라고 구체적으로 설명한 부분은 좋다.

희희 칭찬도 받았지 뭐야😁

화면 별로 프롬프트를 확실히 분리하는 게 좋을 것 같다.

GPT 대제목,중제목,소제목 쓰는 방법을 알았으니 이렇게 수정해봐야지.

만들어보길 추천해! 궁금한 게 있다면 언제든지 얘기해줘

Subscribe to '해이든'

Subscribe to my site to be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to '해이든'!