프로덕트

아직 프로덕트가 없습니다.

아티클

전체 보기
이병우

이병우

[MOM 투표 서비스] 카카오톡 OG태그 반영 실패

문제 상황

기존에 테스트로 사용하던 OG태그 이미지를 바꿔야 했습니다. 함께하는 디자이너 친구가 만들어 주었던 이미지를 적용하여 배포하고, 바로 카카오톡으로 저한테 서비스 링크를 보내보았습니다. 그런데 기존 이미지가 그대로 있더라구요! 배포가 잘 안되었나 싶어 다시 수정해서 재배포 후 테스트를 해도 그대로였습니다.

해결 과정

유추가 되는 문제는 아무래도 캐시 밖에 없었죠. 혹시나싶어 카카오톡 설정에서 대화방 내에 이런 OG 태그에 관한 캐시만 지우는 기능이 있나 찾아보았는데, 역시나 대화 내용과 이미지를 삭제하는 옵션 밖에 없었습니다. 이건 테스트 삼아 건들 수 있는 기능이 아니었죠… 그래서 어떻게든 서칭을 하며 방법을 찾아보려 했습니다. 그리고 역시 비슷한 질문들을 발견할 수 있었고, 카카오 개발자센터에서 해당 캐시만 초기화할 수 있는 공유 디버거를 제공하고 있었습니다!

스크린샷 2024-01-16 오전 10.05.23.png

카카오스토리 공유시 이미지 캐쉬는 어떻게 지우나요?

Og tag 내용(description)을 수정했는데 반영이 안되네요

마치며

개발에서는 내가 처음 겪는 문제란 존재하지 않는다고 하더군요. 이번에도 역시 실감했습니다! 익숙하지 않은 문제를 마주해도 키워드를 잘 잡아 해결법을 더 빨리 발견할 수 있는 역량을 키워야겠습니다.

6
0
이병우

이병우

프로덕트 개선에 챗GPT 활용하기

현재 만들고 있는 프로덕트를 개선하기 위해 챗GPT와 대화를 나눠봤습니다. 그동안 개발이 막힐 때만 챗GPT한테 질문을 했었는데, 이렇게도 활용할 수 있다는 생각은 못 했었네요! 업무 과정에서 챗GPT를 활용하는 방법 뉴스레터와 ChatGPT로 프로덕트 디자인 시간을 줄일 수 있을까 아티클을 읽고, 한번 실제로 제가 만들고 있는 프로덕트에 대해 물어보았습니다.

우선 어떤 서비스인지 한 문장으로 알려주고, 왜 이 서비스를 구상하게 되었는지 문제 상황과 핵심적인 특징들을 정리하여 알려주었습니다. 그리고 서비스 이름을 알려주고, 저와 함께 서비스를 만들고 있는 프로덕트 디자이너라는 역할을 부여했죠.

결론적으로, 저의 프롬프트가 미숙해서인지 혹은 3.5의 한계인지 만족스러운 답변은 얻지 못했습니다. 하지만 잠깐 해본 건데도 큰 장점을 느꼈습니다! 챗GPT에게 잘 전달하기 위해 저도 서비스의 기획적인 부분을 한 번 더 잘 정리 해보게 되었고, 함께 서비스에 대해 의견을 나눠보는 행위 자체에서 제가 발상을 좀 더 넓힐 수 있는 계기가 되었기 때문입니다. 역시 질문하는 역량을 키워야겠습니다. 또한… 4.0을 빨리 사용하고 싶단 생각이 드네요!

5
0
이병우

이병우

[MOM 투표 서비스] 데이터 설계 우여곡절기



최초 구상

이전 글에서와 같이, 투표를 생성하여 투표하기를 할 때 어떤 데이터가 필요할지 러프하게 생각해 보았습니다. 가장 단번에 떠오르는 것은, 투표받을 사람과 각 사람 별 투표 개수였습니다. 데이터는 항상 받아서 클라이언트에 적용하기만 했지, 직접 만드는 것은 정말이지 일자무식이었습니다… 우선 interface를 만들어 나갔습니다. 그런데 생각해 보니 투표는 만든 유저 별로 다르게 생성되어야 하기 때문에 vote라는 콜렉션에서 무엇을 기준으로 다른 문서가 생성되게 할지도 생각해 봐야 했습니다. 이것은 투표를 만든 유저의 uid를 받아 각각 유니크하게 만들 수 있었습니다. 그리고 투표 생성 일시 정도가 떠올랐죠.

스크린샷 2024-02-14 오후 11.38.21.png그렇게 처음에는

  • 투표받을 사람: String[]

  • 투표 개수: Number

  • 유저 ID: String(uid)

  • 생성 일시: Date

이런 식으로 데이터를 생각해보았고, 클라이언트에서 구현해보았습니다. 투표를 생성할 때 받을 수 있도록 방법을 찾아보았는데, Firestore에 데이터를 추가하는 방법은 정말… 정말로 간단했습니다! Firebase를 클라이언트에 초기 셋팅 해주었으면, Firebase의 메서드만 사용하면 될 뿐이었죠.(Cloud Firestore에 데이터 추가 | Firebase)

구상했던 대로 vote 컬렉션에 문서를 생성해보았습니다.

시각화를 통한 개선

그제서야 부족한게 무엇인지 눈에 들어왔습니다. DB에 데이터가 들어가니 허전한 것들이 보이더군요. 머리 속에서 생각만하는 걸로는 허점이 많이 들어났고 정리가 잘 되지 않았습니다. 역시 도식화가 필요했습니다. 저는 다른 개발자들처럼 멋지게 다이어그램을 그리는 것이 어려웠기 때문에... 가장 익숙한 피그마에서 낙서처럼 프로토타입 캡쳐 이미지에 데이터를 끄적이면서 구상하기 시작했습니다. 이 과정을 통해 왜 시각화가 필요한지 진정으로 깨닫게 되었습니다! 흐름에 따라 배치를 해보니 필요한 것들과 데이터의 생성 및 업데이트에 대해 좀 더 명확히 머릿속에 들어왔습니다.

우선 투표받을 사람은 이름만 있으면 되는게 아니라 각 이름 별로 개수를 카운팅 해야 했습니다. 즉, 투표받을 사람의 이름과 투표 개수를 담을 객체 배열이 되어야 했죠. 또한, 투표 상태가 필요했습니다. 최소한 진행 중인 상태와 종료인 상태를 가를 수 있어야 했죠. 이런 식으로 완전 부실한 상태로 뼈대를 만들어, 일일이 테스트해보며 무엇이 부족한지를 떠올리면서 부족한 데이터들을 만들어 갔습니다. 그렇게 만든 데이터로

  1. 후보자 등록 → 투표 등록 완료(데이터 생성)

  2. 투표하기 → 투표 완료(데이터 업데이트)

이 단순한 플로우를 수행하는 것도 저에게는 여간 어려운 일이 아니었습니다… 등록한 투표에 들어가 후보자를 선택하여 투표하기를 완료했을 때 선택된 후보자의 투표 개수만 카운트를 올리는 것부터 난관이었고, 이 플로우를 하다 보니 동시에 총 투표 개수도 올려줘야 한다는 것을 알게 되어 수정하고… 소위 말해 굉장한 삽질이었죠. 이 과정 중에 생각해 본 적 없지만 테스트를 하다보니 필요한 데이터들을 추가적으로 더 많이 구상하게 되었습니다. 가령 가장 투표 개수를 많이 받은 후보자를 우승자로 나타내는 데이터나, 투표 문서의 id 등이 있었습니다. 최초 설계 이후에도 기능들을 구현하며 기획을 추가 및 조정하는 등 많은 변화가 있었죠.


마치며

이렇게 근본 없이 데이터를 설계하다 보니 우여곡절이 많았는데, 문득 백엔드를 하시는 분들의 설계 구상 방식이 궁금해졌고, 새삼 대단하게 여겨졌습니다..! 저는 단순한 설계에도 너무 오랜 시간을 소요하긴 했지만, 이 과정이 무척 재밌었습니다! 추상적인 나의 생각이 데이터가 되어, 화면에서 변화를 나타내고 데이터베이스에 쌓여 유의미한 결과물을 보여줄 수 있는 재료가 되는 이 흐름의 매력에 빠져버렸습니다! 물론 이 역할만이 다가 아니겠지만, 이 분야에 대해 좀 더 많이 경험하고 더욱 공부하고 싶어지는 계기가 되었습니다.

2
0
이병우

이병우

안녕하세요!

항상 아이디어만 많고 실현하지 않고 지지부진 하였었는데, 최근 가장 작은 단위의 아이디어부터 하나씩 만들어가기로 마음 먹고 시작하게 되었습니다!

이전에도 디스콰이엇의 존재를 알고 있었지만, 프로덕트를 만들겠다고 마음 먹으니 다른 분들의 이야기가 궁금해져서 자주 들어오게 되더군요! 새삼 놀라웠던 것은, 팀 단위도 많지만 혼자서도 프로덕트를 잘 만드는 인디메이커들이 이렇게 많다는 것을 알게된 것입니다. 그 뒤로 틈틈히 디스콰이엇에 들어와 다른 분들의 메이커로그를 보며 감탄하고 배우면서 좋은 영향을 많이 받고 있습니다☺️

때문에 저 자신의 기록을 위해서도, 저와 비슷한 상황의 누군가에게는 도움이 될 수 있으면 좋겠다는 마음에서도 꾸준히 메이커로그를 올릴 예정입니다! 잘부탁드립니다!

8
2
이병우

이병우

[MOM 투표 서비스] 개발 시작

저희 팀은 기획과 디자인을 모두 완료한 후 개발에 임하는 순서가 아니라, 프로토타입을 토대로 디자인과 개발을 동시에 진행하며 애자일하게 서비스를 만들어가기로 결정했습니다. 때문에 Firebase의 장점을 활용하여 우선 로그인 기능부터 구현했습니다. 투표 등록자가 자기만의 투표를 등록하기 위해서는 유저 정보를 토대로 데이터를 쌓아야된다고 생각했기 때문이죠. Firebase는 Authentication이라는 제품이 있어, 코드 몇 줄만으로도 유저를 생성할 수 있었습니다. 저는 스스로 서비스를 처음부터 만들어보는 것이 처음이었기 때문에, 이 때부터 더 의욕이 고취되며 개발에 가속이 붙기 시작했습니다!

스크린샷 2024-01-26 오전 9.09.35.png

(친구의 축구 팀 이름이 '팀 불개미'였기 때문에 가칭으로 사용하였습니다.)

react-hook-form을 이용해 폼의 다양한 케이스를 손쉽게 적용 할 수 있었고 Auth 기능(회원가입, 로그인, 이메일 찾기)를 완료한 후 바로 건네 받은 프로토타입의 구현을 첫 번째 목표로 설정했습니다. 저는 홈에서 투표 진행 상태를 3가지 분기로 나누기로 결정하였고(투표 시작 이력 X / 투표 진행중 / 투표 결과), 투표 등록하기 페이지를 만들기 시작했습니다.

스크린샷 2024-01-29 오후 11.10.19.png

로그인 페이지와 마찬 가지로 타이틀과 폼, 버튼만 있기 때문에 UI는 마크업은 금방 해내었고 이제 입력받은 데이터를 Firebase에 보내는 작업을 할 차례였습니다.(정확히는 Firebase에서 제공하는 제품인 Firestore)

Firestore는 글로벌 규모의 모바일 및 웹 앱용 데이터를 쉽게 저장, 동기화, 쿼리할 수 있게 해주는 NoSQL 문서 데이터베이스입니다.

그런데 난관은 여기서부터 시작이었습니다. 단순히 투표를 개설하고 투표하는 기능 뿐이라 데이터 구조도 단순할 것이라 생각합니다. 하지만 프론트엔드만 해오던 저로서는 데이터를 직접 설계하는 작업이 처음이었기 때문에 발상이 쉽지 않았고, 그렇게 저는 우악스럽게 부딪혀 나갔습니다… 이 내용에 대해서는 다음 편에 작성하도록 하겠습니다.

스크린샷 2024-01-29 오후 10.53.25.png

2
0

포스트

아직 포스트가 없습니다.