프로덕트

아티클

전체 보기
이성관

이성관

어멋 트렌딩 프로덕트가 되어버렸잖아(?)

안녕하세요 짹입니다.

자고 일어났더니 트렌딩 프로덕트에 "몰래토익"이 올라갔네요!

영광입니다.

그래서 이번 글에는 "몰래토익" 기획편 이야기를 들려드릴까 합니다.

아 참. 몰래토익을 모르시는 분들은 ㅎㅎㅎ 트렌딩 프로덕트에서 몰래토익 눌러서 한 번 봐주세요.

회사에서 몰래 OO 공부 하는 크롬 익스텐션입니다.

스크린샷 2024-08-09 오전 10.04.07.png

아이디어 기준

다음 제품으로 무엇을 만들까 아이디어를 내다가 몇가지 기준을 정했는데

  1. 유지비용이 낮아야 한다. (a.k.a 서버를 없애자)

  2. 특정 그룹의 사람들이 매일 쓰는 사용성을 가진 녀석

1번에서는 서버통신이 필요치 않은 앱과 크롬 익스텐션으로 범위를 좁혔고

2번에서 여러 그룹의 사람들로 서치를 하다가,

"토익" 시험을 준비하는

직장인 혹은 예비직장인이

매일 사용하는 단어장 크롬 익스텐션

으로 제품 컨셉을 잡게 되었습니다.

b4d7d58a4bef13d52d56.png

(몰래토익의 마스코드, 몰랭이)

팀원을 찾아서

그동안 디자이너 없이 혼자 디자인도 진행했는데, B2C 제품에서는 한계가 있을거라 생각했습니다.

동작하는 서비스가 필요한게 아니라 팔리는 서비스가 필요한 시점이라, 보여지는 것이 더 중요해진 제품이었죠.

그래서 오래전에 같이 손을 맞췄던 디자이너 E씨와 함께 팀을 꾸리고 이 프로젝트를 시작하게 되었습니다.

총 6주의 기간을 가진 이 프로젝트는

3주의 제품 개발

3주의 마케팅

두가지 phase로 나눠서 진행하기로 했고,

3주의 제품 개발을 마치고, 이제 마케팅을 진행하고 있어요.

서비스 이름 짓는건 너무 어려워

사실 여러번 서비스 이름을 지어봤지만, 몇시간을 고민한다고 해서 좋은 이름이 나오는 것은 아니더라구요.

그래서 딱 5분만 시간을 한정해두고 마구잡이로 아이디어를 쏟아내서 그 중에 하나 고르는 것으로 정했습니다.

서비스명 후보들

  • 틈틈영어 (튼튼영어같나…..)

  • 틈새영어

  • 몰래단어장

  • 새탭영어

  • 탭탭영어 (애기들 영어공부 같은..)

  • 탭탭토익

  • 뉴탭토익

  • 탭탭고득점

  • 단어짱

  • 토단완 (토익단어완성)

  • 토마토익 (*)

  • 몰토

  • 몰래토익

  • 크롬단어장

  • 직장인토익완성

  • 직토 (직장인토익)

  • 단단토익

  • 자동암기토익단어장

  • 토마토

  • 암기왕

  • 외워요

  • 외워토익

  • 당근토익

  • 틴토

그 중에서 "몰래토익"을 선택했고, 몰래토익 공부한다는 컨셉이 명확해 지면서,

UI자체도 아예 엑셀을 흉내낸 테마를 가지게 되었습니다.

Screenshot01.png

이정도가 기획편에서 얘기 드릴 내용이고

다음에 또 개발편, 마케팅편으로 찾아뵙겠습니다. 👋👋👋

몰래토익

틈틈이 외우는 토익 단어장

10
1
이성관

이성관

AI와 함께한 서비스 개발기 : NotiNote 크롬 익스텐션

안녕하세요 Zack입니다.

지난 몇일간 Claude를 이용해서 크롬 익스텐션을 개발했었는데,

오늘 크롬 웹 스토어에 런칭이 되었습니다.

AI를 적극적으로 사용해서 개발한 첫 프로젝트였는데,

전반적인 사용 후기를 공유해 드릴께요.

클로드 artifacts를 보고 놀람

Artifact를 보고 충격에 빠졌죠. 이제 왠만한 코딩은 다해주겠다 싶었습니다.

AI가 가이드해주는대로 한 번 버스 타보자! 라는 생각에

일부러 익숙하지 않은 크롬 익스텐션을 골랐습니다.

기능은 크게 3가지 였는데

  1. 새로운 탭을 열었을때 노트를 보여주고, 사용자가 입력한 메모를 저장한다.

  2. 매 1시간 마다 크롬 웹 노티피케이션을 생성하고, 메모의 중요도를 가중치로 두고 랜덤픽한 하나의 메모를 노티로 알려준다.

  3. 옵션 페이지에서 설정을 변경할 수 있게 한다.

처음엔 가볍게 새로운 탭을 열었을 때 화면부터 구성해 봤습니다.

스크린샷 2024-07-09 오후 10.44.26.png

어떻게 확장프로그램을 개발하면서 사용할 수 있는지까지 잘 알려주던구요.

다음은 웹 노티피케이션을 만드는 부분을 진행하려고 또 질문을 던집니다.

스크린샷 2024-07-09 오후 10.45.56.png

Artifect는 멋진 기능이었지만, 크롬 익스텐션을 만드는 코드는 실행을 할 수가 없으니,

어쩔 수 없이 이렇게 코드 조각으로 나왔습니다.

그 뒤로 아래와 같은 질문들을 하면서, 이 한 chat에서 무료버전에서 사용할 수 있는 토큰수를 넘겨버렸습니다.

chrome.runtime.onInstalled.addListener 이걸 어디서 불러야돼? background? content?

background는 언제 실행돼?

sendNotification은 어디서 불러야돼? popup?

Unable to download all specified images. 이 에러가 발생해

newtab에 있던 react state를 다시 열어도 그대로 유지하려면?

거의 핵심 로직들을 클로드의 가이드 아래 손쉽게 구현했고,

이제는 다시 익숙한 frontend작업들이 이어졌습니다.

초기엔 포스트잇 같은 UI를 가져갈까 해서 오른쪽 아래가 살짝 접힌 UI를 그려달라고 했는데

스크린샷 2024-07-09 오후 11.02.18.png

뭔가 접히긴 접혔는데, 반대로 접힌 ㅎㅎ

이걸로 씨름하다가 결국 이 UI를 적용하지 않기로 하면서 폐기했습니다.

한번에 해결하지는 못해도, 결국 답을 찾아감

노티가 발생하면 종소리를 내는걸 원했는데, chrome notification api에는 그런 옵션이 없었어요.
background쪽에서 Audio를 이용해 재생하려 했더니 에러가 나서 다시 Claude를 찾았습니다.

스크린샷 2024-07-09 오후 11.05.36.png

스크린샷 2024-07-09 오후 11.05.47.png

처음 답변 대로 코딩을 했지만 동작하지 않았습니다.

바로 오류 내용을 넣으니 다른 방법을 소개해 주더군요.

스크린샷 2024-07-09 오후 11.06.53.png

아티펙트는 UI뿐만 아니라 코드도 따로 보여주니깐 답변의 가독성이 더 좋아지는 것 같습니다.

스크린샷 2024-07-09 오후 11.07.46.png

AI와 함께 구현한 노티노트의 모습입니다.

Group 6.png

옵션페이지에서 설정을 변경할 수도 있구요.

스크린샷 2024-07-09 오후 11.20.55.png

AI가 가이드하는 개발 경험, 제 점수는요?

마치 골프칠때 캐디가 있는듯한 느낌이랄까요?

처음 보는 오류를 만났을 때, 이전엔 검색하고, github, stack overflow, api documentation을 뒤졌겠죠.

클로드는 설명과 함께 코드를 생성해주니, 초행길을 네비를 따라 가는 느낌이었습니다.

실제로 지난 주 금요일에 시작해서 주말은 건너뛰고 월요일에 작업을 했으니

실제 작업시간은 2일 정도구요.

오늘은 런칭에 필요한 마켓 등록작업을 했습니다.

마켓에 등록한 영문도 역시 AI를 통해서 생성했구요.

저는 크롬 익스텐션이 솔플러가 할 수 있는 매력적인 아이템이라고 생각되어서,

계속해서 AI와 함께 만들어갈 생각입니다.

약간의 광고

지금 Gumroad에서 노티노트의 lifetime license를 무료로 판매하고 있습니다.
지속적인 업데이트 후에 유료로 전환될 예정이니, 미리 구매해 두시면

평생 무료로 사용하실 수 있습니다. 아래 링크를 눌러서 구매하세요.

노티노트 다운로드 링크는 요기

노티노트

알림으로 중요한 일을 잊어버리지 않게 알려주는 노트

3
0
이성관

이성관

혼자서 Saas 개발을 하시거나, 계획이신분들을 인터뷰하고 싶습니다.

안녕하세요. 잭입니다.

혼자서 SaaS를 만들고 계시거나, 앞으로 SaaS를 한 번 만들어보고 싶다 하는 생각을 가지고

계신분들이 disquit에 있으실것 같아요.

그런 분들과 전화로 20분정도 인터뷰하고 싶습니다.

그동안 제품개발에만 빠져서 고객개발을 소홀히 했다는 생각에

다시 처음으로 돌아가 인터뷰를 진행하려고 합니다.

댓글로 남겨주시면 제가 커피챗 신청 드리도록 하겠습니다.

저에게 바로 커피챗을 신청해주셔도 환영입니다. :)

많은 관심과 도움 감사합니다. :)

6
5

포스트

전체 보기
이성관

이성관

고민상담앱을 만들려다가,

꼭 사람에게서만 위로를 받을 수 있을까?

하는 생각이 들었습니다.

집에 있는 고양이나 강아지에게 오늘 속상한 일을 털어놓았던 경험이 아마 있을꺼에요.

그런 경험을 앱으로 할 수 있게 하면 어떨까?

해서 만들었습니다.

"이웃집 고양이 지구"

이웃집 고양이 지구

이웃집 고양이 지구를 만나보세요.

4
0
이성관

이성관

스타트업을 하고계시거나, 준비중이신 분들 중에서
CTO나 개발리소스를 구하려고 하시는 분들 가볍게 coffeechat 하실래요?

stock을 받고, seed나 seriesA 라운드까지 함께 하는 모델을 고민하고 있습니다.

이런 제안이 필요하신 분이나, 아니면 이런 경험이 있으신분이 계시면 조언 부탁드립니다.

3
2