동생이 유튜브에서 귀여운 영상을 공유해줬다. 너무 귀여워서 몇번 돌려보고나니 나도 이런 귀여운 걸 만들어보고 싶었다. 요즘 chat gpt API도 한번 써보고 싶었는데 마침 이 영상을 보고 나니 영상 맨 처음에 나오는 로봇 3개가 자기들끼리 최신 뉴스나 옛날 이야기를 주고 받는 컨셉을 가져와보면 어떨까 싶은 생각이 들었다. 대략적인 컨셉은 정했고, 그래도 이왕 토이 프로젝트로 만드는데 단순히 영상에 나온 로봇의 행동을 그대로 따라하기보단 조금 더 웹 서비스로서 의미를 추가해보자. 처음에는 일정 시간 간격으로 세 개의 로봇 중 랜덤한 하나의 로봇이 서로 최신 뉴스, 그 중에서도 좋은 뉴스를 한줄로 요약해서 이야기를 하면 나머지 두 로봇이 맞장구치는 동작을 생각했다. 귀여운 모션이랑 사운드도 추가해서 그냥..
📖 목차 - 문제점 - 관련 코드 살펴보기 - 의심되는 부분 - 하나씩 해결해나가보자 (오류는 해결, 원인은..?) - Next.js에서 getServerSideProps 란? - 우리는 SSR을 사용하고 있던게 아니었나? - 마무리 문제점 소셜 회원가입 시 바디토리 자체 아이디/비밀번호 입력 단계는 생략되고 바로 이름, 생년월일 등의 정보를 입력하는 단계로 넘어가야 정삭적인 동작이다. 그런데 이게 배포환경에서는 정상적으로 동작하는데 개발환경에서는 아이디/비밀번호 단계가 생략되지않고 진행되고 그대로 가입을 완료하고 DB를 확인해보면 User의 type이 naver나 kakao가 아니라 origin(일반회원가입 유형)으로 저장된다. 소셜로그인 정보 제공 동의 후 콜백URL인 /auth/login/loadi..
📖 목차 - 오류 - 개선사항 로컬 개발환경 및 배포환경에서 서비스를 사용할 때 발생하는 오류나 개선사항을 찾아보자. 찾는대로 계속 추가할 예정이다. 😮 오류 □ Flask 서버 연결 문제 - 로컬에서 도커로 flask 서버 돌릴 때는 정상 작동하는 걸로 보아 flask 배포에서 문제가 발생한 듯함. - 배포한 사이트에서 기록하기는 전혀 안되고, 키워드 추출은 될 때 있고 안될 때 있음. - 이거 해결 안되면 배포한 서비스에서 기록하기, 키워드 추출, 진료과목 추천 기능 안됨. □ DB 변경 및 세팅 - 현재 DB연결이 백엔드 담당했던 팀원의 계정으로 되어있는데 앞으로 계속 리팩토링하며 사용할 거니까 내 계정으로 변경하고 병원, 진료과목 데이터 등 초기 데이터들 세팅하기 □ 카카오톡 회원가입 / 네이버 ..
📖 목차 - Next.js 프로젝트 Vercel로 배포하기 - Flask 서버는 pythonanywhere로 배포하기 - 아직 완벽하지 않은 배포 상태 본격적인 리팩토링을 시작하기 전에, 지금까지 완성된 서비스를 배포시켜보기로 결정했다. 엘리스 AI트랙에서는 프로젝트 기간 동안 각 팀마다 VM을 하나씩 제공해주기 때문에 개발 완료 후 VM 환경에서 배포하여 서비스를 테스트해보긴 했지만 그 후로 VM은 종료되었다. 그래서 지금은 로컬 환경에서만 테스트가 가능한데 포트폴리오로 첨부하려면 아무래도 배포한 서비스가 있는게 좋을 것 같고, 로컬 개발환경과 배포 환경에서 나는 오류는 또 다르다는걸 프로젝트를 하면서 느꼈었기 때문에 본격적인 리팩토링에 앞서 먼저 배포에 도전해보았다. 그래도 아직 취업 전인데 유료로 ..
📖 목차 - 프로젝트 소개 - 꽤나 늦은 프로젝트 후기 & 리팩토링 결심 - 리팩토링해야 할 사항들 정리 💜 프로젝트 소개 바디토리는 음성인식을 통해 매일 나의 몸 상태를 간편하게 기록하고, 기록된 증상을 기반으로 병원을 추천해주는 건강관리 웹 서비스이다. 또한, (전국 병원들과 제휴했다는 가정 하에) 병원과의 연계를 통해 손쉬운 기록 공유 및 진료내역 관리도 가능한 서비스이다. 👇 서비스 기획 의도나 자세한 기능 소개, 작업 내역 등은 아래 노션에서 확인할 수 있다. 바디토리: 건강기록 및 병원추천 웹 서비스 A new tool for teams & individuals that blends everyday work apps into one. hihisohi.notion.site 🤔 꽤나 늦은 프로젝트..
🌅 기획 배경저는 몸에 이상이 생겼을 때 “이거 전에도 이랬던거 같은데 언제였더라?”, “이거 처음이 아니면 문제있는건가? 병원에 가야하나?” 라는 고민을 자주하는 편입니다. 이런 고민을 자주 하다보니 몸에 이상이 생겼을 때마다 핸드폰 기본 다이어리에 기록하고 있는데 이걸 편하게 관리할 수 있는 앱이 있다면 좋겠다고 생각했습니다. 연령대에 관계없이 건강에 대한 관심이 증대되고 있는 요즘, 개인차원에서 건강관리를 목적으로몸상태를 다이어리처럼 매일 기록하고 관리할 수 있는 서비스가 있었으면 좋겠다고 생각했습니다. 또한, 몸이 아파 병원에 방문했을 때 단편적인 현재 증상의 서술만으로 진료를 받아진료결과가 정확하지 않거나 처방에 대해 만족하지 못한 경우가 종종 있지 않았나요? 매일 몸 상태를 기록하고, ..
1) playSegments를 하는데 계속 처음에 전체 모션을 한번 돌려고함..여러 방법으로 다 시도해봤는데 loadAnimation 옵션에 initialSegment 설정해주면 되는 간단한 거였음..^^ 2)랜딩에서 json을 읽지못하는 오류 -> 테스트 해보니 로그인 안한 상태에서 페이지들에서가 다 오류가 뜸오류내용을 검색해보니 json경로가 잘못된걸거라고 해서localhost:3000/static/lotties/~~.json 경로를 직접 입력해보니로그인한 상태에서는 json파일이 정상적으로 뜨는데로그인 안한 상태에서는 / 루트경로 (없는경로는 루트로 리다이텍트 되게 설정해놨음) 로 리다이렉트 됨 _next/static은 이미지처럼 next에서 최적화한 다음에 넣는 static경로?같..
딥러닝 모델을 통해 사용자의 증상 기록에서 자주 등장하는 키워드 5개를 추출하여 “많이 기록된 키워드”로 보여주는 기능을 만들었다. 처음에는 키워드를 텍스트로 보여주기만 하려고 했는데 해당 키워드로 증상 기록을 필터링할 수 있도록 하면조금 더 의미있는 기능이 될 것 같아서 시도해보았다. 구현 시 고려해야할 점을 정리해보자면, 1) record.type이 user인지 hospital인지에 따라 보이는 기록의 형태가 다르다. 키워드가 추출되는 부분은 record.type === user 일때 : 증상(description) 부분 record.type === hospital 일때 : 진단결과(diagnosis), 처방내용(prescription), 상세소견(description) 부분 ..
👿 이슈상황 로컬에서 웹 서비스 전체 개발 작업을 마치고, build하여 VM에 배포한 후 테스트를 하던 중 lottie를 적용한 애니메이션 일부가 제대로 보여지지 않는 것을 발견하였다. 다른 lottie 애니메이션 요소들도 위와 같이 애니메이션의 몇몇 부분이 나타나지 않는 상황을 확인하였다. 로컬에서 개발할 때는 문제가 없었어서 다시 한번 확인해보니 로컬에서 서비스를 실행할 때는 정상적으로 보여지는데 build 후 배포 시에만 위와 같은 이슈가 발생하였다. 💡 해결과정 1) 브라우저 콘솔에서 svg요소가 제대로 들어왔는지 및 에러메세지 확인하기 우선 안보이는 부분들이 svg 자체가 생성되지 않아서 안보이는건지 svg는 생성이 되었는데 애니메이션이 동작하는 과정에서 안보이게된지 확인해보기..
1️⃣ 마스코트 디자인을 캐릭터 애니메이션으로 결정한 이유 이번 프로젝트를 기획할 때 웹, 앱이 익숙치 않은 이용자들에게도 친숙하게 다가갈 수 있는 방법을 고민하다전체적으로 우리 서비스를 이용하는 과정이 대화하듯이 흘러가면 어떨까 생각하게 되었다. 대화형 인테페이스를 가져가면 처음 이용하는 사용자에게 직관적이고 친절한 사용자 경험을 가져갈 수 있고,의료/건강이라는 딱딱할 수 있는 주제를 조금 더 편안하게 풀어낼 수 있을 것 같았다. 서비스의 컨셉을 “나만의 건강비서”로 잡고, 대화형으로 풀어가려면 챗봇처럼서비스의 마스코트가 있으면 좋을 것 같아서이왕 마스코트를 넣는다면 상황에 따라 모션이 달라지는 애니메이션으로 만들고자 했다. 처음 기획한 UI는 2가지인데 한가지는 귀엽고 친근한 느낌을 강조하는 챗봇 캐..
