#05 철학가의 명언, 일기웹에 적용해 보기!
일기를 쓰기 전, 영감을 주는 글들을 넣어보자!
"내면의 평온은 외부 환경이 아니라 마음에서 온다"
세네카
올해, 마흔이 되어 이제 해보고 싶은 것을 해보자! 라고 생각한 것 중 꾸준히 글쓰기와 나만의 창작물을 만드는 것이었습니다. 회사에서 기획. 디자이너 업무를 하다 나만의 일기웹을 만들고 싶어 챗GPT로 웹개발이 현실화되는 지금이 너무 신나고 흥미롭습니다.
MVP 기능
(Minimum Viable Product) 최소 기능
1. 구글 로그인 (개인사용자 계정 1차 보안 및 가입 없이 로그인하여 사용)
2. 날짜 (달력기능 고려)
3. 본문내용 글쓰기, 글수정, 글삭제
4. 일기 날짜별 목록 보기
5. 글쓰기 페이지에 "묵상주제글 or 마음돌보기 글" 랜덤으로 변경되기
오늘은 글쓰기 페이지에 묵상주제글 혹은 일기를 쓰기 전 영감을 주는 글들이 랜덤으로 보이는 기능을 개발했어요.
영감을 주는 글들은 스토아학파의 철학가의 유명한 명언들을 몇몇 선택하여 넣어봤어요.
명언 목록은 많을수록 좋겠죠! 저는 4가지 정도 넣어봤습니다.
아래와 같이 명언과 저자명을 같이 정리했습니다.
"시간이 흐를수록 우리의 영혼은 생각의 빛깔로 물들어간다",
"마르쿠스 아울렐리우스"
이러한 글이 랜덤으로 보이는 거예요.
JSON 파일을 만들어서 글 목록들을 해당페이지에서 불러와서 보이는 형태라고 보면 됩니다.
그래서 계속 이곳에 문서처럼 적어둘 수 있어요!
영감을 주는 글 -JSON 파일 철학자의 명언과 저자이름도 멋지게 꾸며보자!
철학자의 명언 목록을 디자인 스타일을 적용하는 과정도 필요해요.
따옴표와 저자의 이름을 사이즈 구분도 해야 하고, 텍스트 폰트도 좀 더 가독성 있게 적용할 예정입니다.
컴포넌트라는 별도의 구조를 다시 만들어서 그 안에서 스타일링을 적용합니다.
컴포넌트라면 레고블록이랑 비슷하다고 보시면 돼요. 이 레고블록을 하나 만들어두면 다른 곳에 또 넣어서 쓸 수가 있고 수정 및 관리하기가 편하답니다.
이 디자인은 ChatGPT에게 어떤 스타일의 디자인으로 만들어줘라고 프롬프트 작성을 해도 되고
직접 개발수정이 가능하다면 프롬프트가 준 코드에서 일부 수정을 하셔도 됩니다.
명언 리스트를 불러와 컴포넌트 디자인 스타일링을 해주는 과정그렇다면 일기목록 화면이나 글쓰기 화면에 이 내용을 넣어주면 되는데요!
지금까지 디자인된 화면을 공개합니다!
글쓰기 목록과 일기내용을 삭제하고, 일기 쓰기 전 세네카의 글과 같은 명언이 랜덤으로 보이는 기능을 구현하였습니다.
일기웹에 명언이 추가 적용된 화면 UI
작성한 일기가 없을 때 제가 그린 연필을 타고 있는 소녀 그림을 넣어보았습니다.
이 부분까지 넣으니 정말 일기웹이 거의 완성된 것 같아요!
일기 쓰기, 수정, 삭제까지 구현된 일기웹
중간에 디자인을 수정하고, 공통 컴포넌트 추가 과정을 브런치에서 소개해드리지 않았지만 이 모든 과정도
사전에 원하는 디자인을 찾아보고 제가 직접 수정해 보면서 감성일기 웹을 구현할 수 있었습니다.
그 과정이 조금 복잡하긴 해서 차후에 천천히 소개해드릴게요!
이제 앞으로 아주 몇 가지 중요한 것들이 남았어요.
버그 및 보안, 배포가 남아있습니다.
일부 제가 원하는 대로 되지 않을 수도 있겠지만 더 공부해 보고 그 과정도 공유드리겠습니다.
감사합니다~!
p.s
앞으로 일기웹을 작성해보고 싶은 분들이 있으시다면 초대해 드린 후 작성을 같이해보아도 좋을 것 같습니다.
