뒤로
양우석
양우석 ·

개인 취향에 맞는 카페 추천 서비스 시작

안녕하세요. 지난년도부터 음료, 커피, 카페라는 소재로 @이보민 님과 서비스를 개발해왔어요.

그리고 이번에 카페 추천 서비스를 만들어 보기로 하면서 이전과 내용 구성에 있어 이질감이 많아서 홈 페이지 구성을 변경해야 할 필요가 생겼어요.

기존 홈페이지

gpt (2).png

변경 할 사항들

  • 내용 구성할 문구들 받아서 적절히 가공하기

  • 디자인 벤치마킹 및 사이트 레이아웃 일부 수정

  • 카페 추천 tally 링크 달기 및 채널톡 넣기

수정 시작

  • 내용 구성할 문구들 받아서 적절히 가공하기

image.png

보민님이 변경될 공식사이트 내용을 전달해주셨어요.

피그마에서 레이아웃 구성을 대략 나눠보았는데, 개인적인 생각으론 내용이 좀 많다고 생각이 되어 카페 추천 부분에 중점을 두어서 핵심 내용과 이미지들이 전달되도록 구성하고 싶었어요.

하지만 보민님과 의논해본 결과 카페 등록 부분의 내용도 카페 사장님들과의 대화를 위해 필요하다고 생각되어 일단 같이 넣기로 했어요.

내용을 가독성 좋게 살짝 재구성하고 네이버 맞춤법 검사기로 확인 후 복붙을 해줬습니다.

  • 디자인 벤치마킹 및 사이트 레이아웃 일부 수정

image.png

개발은 익숙하지만 디자인은 잼병이라 화면을 만들 때는 항상 다른 서비스들의 디자인을 참고해서 개발했어요.

이전에 softr라는 노코드 툴을 몇 번 썼었는데, 랜딩페이지가 참 깔끔하다는 생각이 들어서 이걸 벤치마킹하여 레이아웃과 디자인을 구성하기로 결정합니다. (softr basic plan 월 비용이 5만원대로 올라서 사용 취소 ㄷㄷ)

  • 카페 추천 tally 링크 달기 및 채널톡 넣기

image.png

보민님이 tally로 레터 템플릿을 구성하여 링크를 보내주셨구 사이트 상단의 카페 추천 버튼과 컨텐츠 내부의 추천받기 버튼에 연결 시켰어요.

나머지 버튼을 눌러도 아무 작동이 없는 버튼들은 '준비 중입니다.'라는 alert를 띠우게 해줬네요.

image.png

마지막으루 채널톡을 추가해주었네요. 이전에는 카톡 채널 링크를 달았었지만 채널톡으로 카톡도 같이 연동이되다보니 같이 사용해보기로 했어요.

채널톡은 한번 구성해본적이 있어서 요부분도 비교적 빨리 했네요.

현재 홈페이지 완료

  • PC

image.png
  • Mobile

drinkdepth.com_(Samsung Galaxy S8+).png

노코드 툴로 했으면 정말 별로 안걸렸을텐데, 직접하니 반응형도 고려해야되구 역시나 시간이 많이 걸리네요. 주말이 후딱 지나갔었습니다.

To Be Continued.

흠...카페 추천 AI는 어떻게 개발해야하나;;;

어떤카페

당신이 원하는 완벽한 카페를 찾아주는 AI 카페 맵

10

댓글

로그인 후 댓글을 남길 수 있습니다.

양우석
양우석

ㅎㅎ 앞으로두 애용하겠습니다~ 저두 같이 나아가는 느낌이라 좋네요!