Share
Sign In
월간 ProductHunt - 2023년 9월
Kidow
벌써 월간 ProductHunt를 작성할 때가 왔군요. 이번 달은 시간이 정말 빨리 지나간 것 같아요.
이 블로그를 봐주시는 분들이 별로 많지는 않지만, 직장에서가 아닌 스스로 만들어낸 루틴을 꾸준히 지키는 것은 시간이 지나고 되돌아 보면 뿌듯하고 보람찬 것 같습니다.
(매달 블로그를 쓸 때마다 다른 주제를 쓰다 보니 점점 아이디어를 떠올리는 게 골이 아파 오네요 ㅎㅎ)
이번 월간 ProductHunt에서는 간단하게 프로그래밍적인 이야기를 다루어 볼까 합니다. 운영하고 있는 https://daily-producthunt.kidow.me를 어떻게 만들었는 지에 대한 이야기입니다. 뭐랄까, 어떻게 사람들에게 프로그래밍적으로 콘텐츠를 전달하는 지 궁금해 하는 분들이 계실 것 같아서요.
1. 웹 개발자
저는 웹 개발자입니다. 주로 프론트엔드를 다루는데요, Next.js를 주로 사용해서 개발을 하고 있습니다. 경력을 떠나서 개발자의 길을 걷게 된 건 23년 기준으로 5년 반이 지났네요.
처음 개발을 시작할 때는 풀스택을 지향했는데, 계속 공부를 하다 보니 한 쪽만 잘하기에도 엄청난 공부가 필요하더라구요. 저는 디자인에도 관심이 많은 편이라, 보이지 않는 뒷단을 정교하게 짜는 백엔드 대신 이쁜 웹사이트를 만들 수 있는 프론트엔드에 마음이 끌렸습니다.
2. 사용한 솔루션들
이 프로젝트는 저 혼자 만들고 운영 중인데요, 풀스택을 사용한 것은 아닙니다. 백엔드는 Supabase라는 솔루션을 사용해서 구축했는데요, Firebase처럼 DB와 인증, 스토리지 등을 직접 구축할 필요없이 제공해 줍니다. 일간 ProductHunt도 이 솔루션을 사용했습니다.
Supabase 메인 홈페이지
세상이 참 좋아져서인지 백엔드는 이렇게 솔루션으로 대체하고 프론트엔드만 빠르게 개발해도 프로젝트를 혼자 운영할 수가 있는 시대가 됐습니다. 프론트엔드를 선택한 게 참 다행이라는 생각이 든답니다.
호스팅은 그 유명한 Vercel을 사용했습니다. Vercel은 정말... 웹 개발계에서는 저에게는 애플과 같은 혁신 기업이 아닐까 생각이 듭니다. 처음 등장할 때부터 사용해왔는데 이전에 쓰던 Heroku같은 느린 서비스와 비교해보면 Vercel로 인해 절감한 시간이 얼마나 많을지 상상이 안됩니다. UI/UX도 너무 좋고 무료로도 웬만한 좋은 기능들은 다 제공해 줍니다.
일간 ProductHunt의 Vercel 대시보드
3. 대시보드는 어떻게 생겼을까?
모르는 분들이 더 많으실텐데 사실 대시보드 페이지가 이 프로젝트 안에 숨어있습니다. /login 페이지로 들어가면 로그인할 수 있는 화면이 나오는데요,
들어가보면 이렇게 아주 간단한 로그인 폼이 있습니다. Supabase가 제공하는 매직 링크 기능을 통해서 이메일 로그인을 할 수 있는데,
이렇게 이메일로 전달받은 인증 코드를 입력해서 대시보드에 들어갈 수 있습니다. 당연히 저만의 이메일로만 로그인할 수 있습니다 ㅎㅎㅎ (여러분들은 안되구요.)
그렇게 대시보드에 들어가면
보낼 메시지를 미리 예약할 수 있는 페이지를 볼 수 있습니다. 평일에 보낼 콘텐츠들을 이 곳에서 미리 작성해 둡니다.
💡
사실 서비스명이 일간 ProductHunt이지만, 매일매일 그날 소개된 제품을 큐레이션하지는 않습니다. 어떤 날은 흥미로운 제품들이 많은가 하면, 어떤 날은 재미없는 제품만 있어서 들쭉날쭉하거든요. 그냥 그날그날 추천을 많이 받으면서 제 기준에서 이해가능한 제품들을 위주로 소개하고 있습니다.
슬랙과 디스코드로 보낼 시 어떤 ui로 보이게 될 지 미리보기도 만들어 둔 모습입니다.
ProductHunt의 타임 트레블 페이지를 들어가보면 월/일자별로 그날 올라온 제품들을 한 눈에 볼 수 있는데요,
이 페이지에서 하나하나 들어가보면서 소개할 만한 제품들을 직접 찾아봅니다.
마지막으로 예약 폼의 화면입니다. 흥미로운 제품을 찾으면 이 화면에서 관련된 정보들을 적습니다. 예약을 누르면 전송할 데이터를 하나 생성합니다.
저는 보통 모든 제품들을 다 가입해보고 테스트하지는 않습니다. 대부분 가입이 필수인데다가, 너무 많은 가입을 하면 gmail이 마케팅 메일로 지저분해지기도 하고, 무료 버전이 없는 경우도 많거든요. 홈페이지에서 어떤 서비스인지 빠르게 파악하고 직접 정리하는 식으로 내용을 작성하고 있습니다.
저는 크롤러를 사용해서 내용을 긁어온다던지, AI를 활용해서 내용을 요약하거나 하는 일도 하지 않습니다. 제가 이 프로젝트를 시작한 건 세상의 다양한 IT 프로덕트들을 들여다 보면서 사업 영감을 받고 싶었기 때문이거든요. 저 스스로를 위해 시작한 프로젝트이니까요.
4. 콘텐츠를 전달하는 방법
보낼 내용을 저장하고 목록으로 나열하는 과정을 위에서 설명했는데요, 이제 콘텐츠를 전달하는 방법에 대해 소개할 때가 되었습니다. 위 사진들에서 목록 사진을 보시면 종이비행기 아이콘이 보이실텐데요,
저 아이콘을 누르면 여러분들에게 콘텐츠를 보내는 로직이 실행됩니다.
Next.js에서는 /api라는 경로를 통해 자체 api를 구축할 수 있습니다. 콘텐츠를 보내는 경로는 /api/send-message인데요, 코드를 하나하나 뜯어서 최대한 간단하게 소개해보겠습니다.
미리 예약해둔 콘텐츠의 id를 통해 콘텐츠 정보들을 reserves라는 테이블을 쿼리하여 가져옵니다. Promise.all을 사용하여 동시에 구독자 목록을 connections 테이블을 쿼리하여 가져옵니다.
먼저 histories 테이블에 새 데이터를 생성합니다. histories 테이블은 전송 목록으로, 홈 화면과 상세 화면에서 사용되는 데이터를 저장합니다.
생성된 데이터의 id를 단일 데이터로 쿼리합니다. 이제 유저들에게 콘텐츠를 전달할 때입니다.
connections라는 테이블은 다음과 같은 칼럼들을 가지고 있습니다. 각각의 외부 서비스를 통해 보내기 위한 키들을 가리키죠.
칼럼명
용도
slack_webhook_url
Slack 웹훅 url
notion_token
개인화된 Notion 토큰
notion_database_id
복제한 데이터베이스의 id
discord_webhook_url
Discord 웹훅 url
telegram_chatting_id
Telegram 봇 id
jandi_webhook_url
잔디 웹훅 url
한 열의 하나의 외부 서비스 키가 할당되는 구조입니다. 예를 들어 slack에 연결했다면 slack_webhook_url만을 저장한 데이터가 한 줄 생성되는 것이죠. 이렇게 하면 Promise.allSettled와 map 메소드로 한 번에 모든 유저에게 동시에 메시지를 전송할 수 있게 됩니다.
티스토리의 경우는 궁금해서 한 번 만들어봤습니다. 콘텐츠를 전달할 때마다 제 티스토리에도 글이 같이 올라옵니다.
마무리
개발자지만 프로그래밍을 일반인들도 알 수 있을 정도로 설명해본 적이 없어서 여러분들에게 내용 전달이 잘 됐을지 모르겠네요. 어떻게 보면 개발이란게 아직도 배워야할 게 산더미인, 한숨이 나오는 여정을 걷는 과정의 연속이지만 사람들에게 가치를 제공하는 서비스를 만드는 것은 생각보다 복잡한 로직이나 설계가 필요하지는 않은 것 같습니다. 지금까지의 개발자 여정을 돌아보면 이 서비스를 만든 건 제 입장에서 별로 어렵지 않았거든요. 그냥 지금까지 배워왔던 것들을 이용해 만들었으니까요.
은근히 많은 개발자들이 가치를 창출하는 프로덕을 만들기 위해선 개발의 초고수가 되어야 한다고 생각하는 경우가 있는데, 중요한 것은 간단한 투두리스트라 할지라도 작게나마 시작해보는 것이 아닐까요? 🤗
/daily-producthunt
Subscribe
월간 ProductHunt - 2023년 12월
안녕하세요, 어느새 23년 마지막 월간 ProductHunt를 쓰게 될 날이 왔네요. 포스팅이 좀 늦었는데, 사실 어떤 주제로 연말을 마무리할 지 많은 고민을 했습니다. 일간 ProductHunt의 올 한 해를 돌아보는 글을 쓸까하다가 별 영양가가 없을 것 같아서, 대신 ProductHunt에 관해서 한 해를 돌아보는 글을 쓰면 어떨까 싶은 생각을 하게 되었습니다. 12월의 주제는 그래서 "연간 ProductHunt - 2023년"으로 한 번 정해보겠습니다. 위 페이지에서는 2023년에 올라온 모든 제품들을 열람할 수 있습니다. 웹사이트 측에서 갯수를 직접 발표한 게 없어서 직접 월 별로 세보았습니다. 그 결과 총 15,000개가 넘는 제품이 올해 업로드된 것을 알 수 있었습니다. 월 평균 1,250개, 일 평균 40개 이상 올라왔다고 볼 수 있겠네요. 저는 이 수치가 꽤 놀라웠습니다. 제가 예상했던 수치보다 훨씬 많았거든요. 그래서 작년 데이터도 한 번 알아봤습니다. 결과는 역시나였습니다. 작년보다 44.5% 많은 제품이 등록되었던 겁니다. 이 결과에 대해서 제가 주목한 포인트는 AI였습니다. AI 제품 수를 옆에 같이 기재한 이유는 올해 만들어진 제품 중 AI 관련 카테고리에 속했던 제품의 비중이 31%로 아주 높았기 때문입니다. 2022년에는 AI 제품 수 비중이 10%도 미치지 못했던 것, 2022년 11월 30일에 ChatGPT가 발표되었던 걸 생각하면, 2022년 12월부터 AI 관련 제품이 급증하기 시작한 것이 우연이 아니라는 얘기인 셈이죠. 일간 ProductHunt를 구독하신 분들이라면 아시겠지만, 제가 평일에 제품을 5개씩 소개할 때마다 하루에 한 개 이상은 대부분 AI 관련 제품이 있었습니다. 저는 항상 추천을 가장 많이 받은 제품 순 위주로 소개를 하는데, AI 제품들은 항상 많은 추천을 받더라구요. 2023년은 한 마디로 AI개척시대 제가 기억하는 것만 해도 2023년의 AI 제품들은 정말 다양한 분야와 카테고리들로 등장했던 것 같습니다. OpenAI가 마소 뒤에서 전폭적인 지원을 받으며 3월에 GPT-4를 출시하고, 그로 인해 뒤이어 수많은 AI 스타트업들이 GPT-4를 이용해 다양한 제품들을 출시했죠. 올해는 서부개척시대처럼 AI개척시대였다면, 고금리와 고물가로 인해 투자 심리도 다소 줄어들면서 내년에는 수익을 내기 위해 상업성을 추구하는 AI 제품들이 출시될거라고 예상하는 전문가들의 의견이 많더라구요. 프로덕트헌트에서 많은 추천을 받은 AI 제품들을 월별로 하나씩 소개해보겠습니다. 이 스타트업들이 실제로 어떤 실적을 거두었는지는 다루지 않겠지만, 올해 AI 스타트업들이 AI 기술로 얼마나 다양하고 재미난 시도들을 했는지를 가늠할 수 있을 겁니다. 1월. Originality.ai 23년 1월에 출시된 이 서비스는 ChatGPT가 등장한 지 얼마되지도 않아서 등장했는데요, 텍스트 콘텐츠를 긁어서 붙여 넣으면 얼마나 AI 티나게 글이 쓰였는지, 동시에 표절 여부도 검사해주는 서비스입니다. 위와 같이 점수를 매기고, 표절 여부를 판정하여 보여줍니다. 2월. Decktopus 2월에는 프레젠테이션을 AI로 몇 분만에 만들어주는 서비스가 등장합니다. 단 한 줄만의 주제를 입력하면 빠르게 몇 장의 슬라이드와 함께 개요를 생성해주죠. 지금은 유사한 서비스가 많이 등장해서 크게 감흥은 없을지 몰라도 이 기술이 앞으로 PPT 생성 및 편집 시간을 크게 단축시킬 것임은 분명해 보입니다.
월간 ProductHunt - 2023년 11월
반갑습니다. 벌써 또 한 달이 지났습니다. 이번 달에는, 제가 하는 서비스와 비슷한 해외 큐레이션 서비스들을 10가지 소개해볼까 합니다. 똑같은 큐레이션 서비스들임에도 다양한 선정 주제와 디자인들이 있으니 비교해 보는 재미가 있을 겁니다. 이 서비스들을 보니 저도 일간 ProductHunt를 어떤 방향으로 업데이트하면 좋을지 많은 영감이 생기더라구요. 큐레이션(Curation)이란, 원래 미술관에서 기획자들이 우수한 작품을 뽑아 전시하는 행위를 말하는데 이 것이 다양한 주제별로 운영자가 선정하여 맞춤형으로 콘텐츠를 보내는 행위로 파생된 것을 말합니다. 1. 1000.tools 딱 1,000가지의 생산성 도구들만 운영자가 직접 엄선해서 나열해주고 있는 서비스입니다. 해당 리스트에 직접 제출도 가능한데, 재미있는 점은 제출이 유료 구독제라는 것입니다. 위 화면에 보이는 Ad 마크가 그것이죠. 월 $5.99에 자신의 제품을 올릴 수 있는데요, 올 10월 초 오픈한 뒤 총 방문자가 25K를 기록한 것을 보면 6달러 정도에 마케팅비 사용하는 것 정도는 서로에게 윈윈일 수 있지 않을까요? 2. Intools 직접 엄선한 800개 이상의 생산성 도구들을 모아놓은 웹사이트입니다. 마찬가지로 제출이 가능하지만 유료는 아닙니다. 상세 페이지에서는 기능을 자세하게 적어 놓고 있습니다. 3. Freelance Things 프리랜서를 위한 리소스들만 엄선해서 보여주는 웹 서비스입니다. 재미있는 것은 짧은 트윗이나 비디오, 책, 기사들도 엄선한다는 것인데요, 디자인이 뭔가 오마카세에서 넓은 접시에 스시를 담아주는 모습같아서 인상적입니다. 4. Startups.fyi 돈을 벌고 있는 소규모 스타트업들의 업종, 수익 등을 소개하면서 스타트업 아이디어 영감을 전달하는 웹사이트입니다. 한 달에 얼마나 수익을 내는지, 몇 명이서 만들었는지, 언제 시작했는지 등등을 전부 소개하고 있습니다. 수익 창출 아이디어 영감을 얻고 싶다면 추천드립니다. 5. Curated 전 세계 다양한 웹 디자인들을 엄선해서 보여주는 웹 서비스입니다. 저 같은 웹 디자인 영감을 얻기 위해 종종 이용합니다.
월간 ProductHunt - 2023년 10월
안녕하세요, 월간 ProductHunt입니다. 이번 10월도 시간이 참 빨리 지나갔네요. 이번 달 주제는 "완전히 무료인 꿀 제품 TOP 11"입니다! ProductHunt에 소개되었던 제품들 중 완전히 무료이면서 유용하다고 느꼈던 제품들을 엄선해서 소개해 보려고 합니다. 각기 다른 카테고리들로 엄선했으니 꼭 정독해주세요! 1. Screenity 무료로 화면 녹화 기능을 제공하는 크롬 & 엣지 익스텐션입니다. 뿐만 아니라 화면에 그림을 그리거나 텍스트를 넣을 수도 있습니다. 주로 데모 영상을 만들 때 유용하게 사용할 수 있습니다. 2. Icon Buddy 10만 개가 넘는 svg 아이콘을 무료로 제공하는 웹 서비스입니다. 지금은 18만 개로 늘었는데요, 여러 다양한 아이콘 컬렉션들을 한데 모아 엄선한 웹 서비스입니다. 크기, 모양, 색상도 자유롭게 커스텀하여 내보낼 수 있습니다. 3. Bento Bento는 링크 인 바이오를 만들 수 있도록 도와주는 서비스로, 링크트리와 비슷하다고 볼 수 있습니다. 자신의 프로필 페이지를 다양한 소셜 미디어 링크 블록으로 이쁘게 꾸밀 수 있는 멋진 웹 서비스입니다. 제가 사용하지는 않지만 개인 블로그를 디자인할 때 이 서비스를 참고해서 만들었습니다. 4. Peeps 무료로 3D 아바타 이미지를 만들고 PNG 파일로 내보낼 수 있는 웹 서비스입니다. 상업용으로 사용 가능하며, 무려 286,654,464가지 아바타를 만들수 있다고 합니다. 저는 웹 서비스를 만들 때 임시 아바타 이미지가 필요할 때 활용합니다. 5. Super designer 다양한 도구의 디자인 생성기들을 버튼 클릭만으로 랜덤 생성해주는 웹 서비스입니다. SVG 배경, 3D 모양, 배경, 패턴 등 이쁜 디자인들을 크기, 모양 등을 커스텀하며 랜덤 생성하고 svg나 코드로 내보낼 수 있습니다. 6. Responsively 반응형 웹 앱 개발을 위한 브라우저로, 웹 서비스를 개발할 때 다양한 디바이스에서 어떻게 보일 것인지를 한 눈에 파악할 수 있습니다. 웹 개발자인 저에게 필수템이죠.