😀 자신과 팀소개를 부탁드립니다.

안녕하세요! 팀 슬래시에서 디자인과 사용자 경험을 담당하고 있는 고경표라고 합니다.

팀 이름인 '슬래시(Slashy)'는 불필요한 정보와 불편한 경험을 과감히 쳐내고 핵심적인 정보만을 제공하겠다는 의미를 담고 있어요.

고경표: 사용자 경험(UX) 디자인 및 인터페이스 디자인 담당

윤석현: 서비스 프론트 & 백엔드 개발 및 인공지능 모델 담당

🤗 프로덕트 소개좀 해주세요~

슬래시노트는 웹 브라우저에서 방문한 다양한 웹페이지의 콘텐츠 노트로 정리하고 자동으로 요약까지 해주는 생산성 도구입니다.

노트 정리 기능: 요약된 내용을 구조화된 노트 형태로 정리하여 제공하며, 사용자가 필요할 때 쉽게 접근할 수 있습니다.

주제 기반 요약: 사용자가 설정한 주제에 따라 관련된 정보를 요약하여 제공합니다.

사용자 친화적 인터페이스: 직관적이고 사용하기 쉬운 인터페이스를 통해 누구나 쉽게 사용할 수 있습니다.

⁉ 프로덕트를 만들게 된 계기는 무엇인가요?

방대한 양의 웹 콘텐츠를 효율적으로 관리하고 요약하는 게 생각보다 불편하다는 사실을 깨달았어요.

연구, 학습, 업무 등을 볼 때 신뢰할 수 있는 정보를 빠르게 수집하고 요약해야 하는 상황을 많이 경험하기도 했고요.

직접 메모장을 켜고 정리할 수도 있지만, 시간과 노력이 많이 필요하다는 문제점을 느꼈습니다.

기존의 가설은 사용자들이 빠르고 효율적으로 정보를 요약할 수 있는 도구를 필요로 한다는 것이었어요.

이를 서비스로 구현하기 위해서 웹페이지 자동 요약 알고리즘과 사용자가 쉽게 접근할 수 있는 인터페이스를 개발했고,

사용자의 주제 설정에 따라 맞춤형 요약을 제공함으로써 더욱 개인화된 서비스를 제공하고자 했습니다.

처음에는 간단한 요약 익스텐션이었지만, 사용자 피드백을 통해 웹 콘텐츠 자동 요약을 포함한 “웹브라우징 어시스턴트”라는 기능이 더 큰 가치를 제공할 수 있다는 것을 깨달았어요.

그래서 지금은 자동 요약 기능 뿐만 아니라 브라우징 자체를 돕는 인터페이스를 준비 중입니다.

🤝 팀원분들은 어떻게 만나셨나요?

학교 창업 수업에서 팀원으로 처음 만났어요.

그때 교수님이 아무것도 알려주지 않아서 맨땅에 헤딩하는 느낌으로 밤새 프로덕트를 개발하곤 했는데, 그때의 순수했던 열정이 지금은 살짝 부럽기도 하네요ㅎㅎㅎㅎ

😱 개발은 어떻게 진행이 됬나요?

우선, 문제를 구체화하고 시장 조사를 통해 사용자 요구를 파악했습니다.

방대한 양의 웹 콘텐츠를 효율적으로 관리하고 요약할 수 있는 도구가 필요하다는 가설을 바탕으로 사용자들이 빠르고 효율적으로 정보를 요약할 수 있는 도구를 개발하기로 결정했습니다.

설계 단계에서는 서비스의 주요 기능과 인터페이스를 구체화했습니다.

TailwindCSS를 이용해 직관적이고 사용하기 쉬운 인터페이스를 설계했고, 사용자가 웹 콘텐츠를 쉽게 수집하고 요약할 수 있는 UI를 고민했어요.

웹사이트 요약에는 LangChain을 사용하여 사용자가 지정한 주제에 따라 정확한 요약이 가능하도록 했습니다.

Google 확장 프로그램 형태로 개발하기 위해 HTML, CSS, JavaScript(Manifest V3)를 사용했습니다. 주

요 기능인 노트 정리 기능과 주제 기반 요약 기능을 구현하기 위해 AWS Lambda를 이용하여 백엔드 코드를 실행했습니다.

사용자 데이터와 요약 내용을 저장하고 관리하는 DynamoDB도 추가했고요.

그리고 개발된 기능을 테스트하기 위해 내부 테스트와 사용자 피드백을 병행했습니다.

사용자의 피드백을 반영하여 버그를 수정하고, 인터페이스를 개선했어요.

지금은 Google Chrome 웹스토어에 확장 프로그램을 배포하여 사용자들이 실제로 사용할 수 있도록 한 상태입니다.

1. 크롬 익스텐션 관련

아이디에이션 단계에서 웹 브라우징을 보조하기 위한 서비스를 만들기 위해 어떤 형태의 서비스를 만들어야 할지에 대한 고민을 했습니다.

금방 일반적인 앱, 웹 형태로는 불가능하다는 결론이 나왔습니다.

옵션은 크게 두 가지였는데요:

1. 1)기존 브라우저(크롬, 사파리 등)의 확장 프로그램 형태로 만들자.

2. 2) 자체 브라우저를 만들자.

결론적으로 1)번의 형태로 개발하기로 했습니다.

크롬에서 제공하는 API만으로도 충분히 필요한 권한과 데이터를 얻어올 수 있었고, 특히 가설을 검증하기에 가장 품이 들지 않는 방식이라는 생각이 들었기 때문입니다.

브라우저를 만드는 건 기술적 관점에서 생각하면 많은 권한을 얻을 수 있는 방법이기 때문에 매력적이지만,

타 브라우저 사용자들을 우리 브라우저로 전환시켜야 하는 문제 등이 존재하기에 배보다 배꼽이 커지는 해결책이라고 결론지었어요.

크롬 확장 프로그램을 만들기로 결정한 뒤, 빠르게 개념을 잡기 위해서 다음 자료를 참고했어요.

노마드 코더 확장 프로그램 영상

• • 개념을 빠르게 파악하고, 이런 식으로 개발하는구나~ 감을 잡는 데에 도움이 많이 됐습니다.

Chrome Extension API Docs

• • https://developer.chrome.com/docs/extensions/reference/api?hl=ko

  • 구글에서 제공해 주는 공식 API 문서입니다. 가장 잘 읽어야 하는 자료입니다.

Claude 3.5 Sonnet

• • 최근에 ChatGPT 유료 구독을 해지하고 Claude 구독을 시작했는데 코드 생성 능력이 정말 만족스러워요.

  • 주로 원하는 기능을 설명하여 코드 초안을 Claude에 맡긴 뒤 실행해 보고, 안 되면 직접 디버깅하거나 디버깅조차도 맡겨버리는 식으로 작업을 해요.

  • 이런 식으로 빠르게 개발하면 생산성이 정말 높습니다.

  • 특히 MVP 수준에서는 복잡한 구조를 짤 필요가 없기 때문에, 작업을 잘 나누어서 하나하나 맡기면 웬만해서는 1~2회 시도 만에 의도한 대로 구현이 잘 되는 것 같아요.

개발이 끝난 뒤에는 개발자 계정을 등록(5달러 지불)하고 앱 제출을 위한 여러 양식을 작성해야 해요.

앱스토어나 구글 플레이스토어에 앱을 제출해 보신 분들은 익숙하실 텐데, 앱 설명, 각종 이미지, 개인정보처리방침같은 문서를 작성해서 올려야 합니다.

크롬 확장 프로그램만의 특징이라면 앱 개발 시 manifest.json에 앱에서 사용할 권한을 미리 기술해야 하는데요,

앱을 등록할 때, 요청한 권한을 어떤 식으로 사용할 건지 설명을 해야하는 섹션도 있었습니다.

마구잡이로 권한을 요청하면 글을 많이 써야 해서 꼭 사용할 권한만 요청하는 게 좋을 것 같습니다.

폼을 전부 작성하면 심사 과정을 거쳐 승인이 되는데요, 저희 같은 경우에는 특별한 이슈 없이 2~3일 만에 바로 승인이 났습니다!

2. 랭체인 관련

저희는 웹 사이트의 정보를 브라우징 주제에 맞게 요약해 주는 기능이 있는데요, 백엔드에서 해당 기능은 Langchain의 도움을 받아 구현되어 있습니다.

Chat API로 요청하는 식으로 구현해도 되지만, 굳이 Langchain을 사용한 이유는 크게 다음과 같습니다:

1. 프롬프트 템플릿 관리 용이성 Langchain은 프롬프트 템플릿을 효과적으로 관리할 수 있는 기능을 제공합니다.

2. 이를 통해 다양한 상황에 맞는 프롬프트를 쉽게 작성하고 관리할 수 있습니다. 특히 복잡한 프롬프트 구조를 가진 경우,

3. Langchain의 템플릿 시스템을 활용하면 코드의 가독성과 유지보수성을 높일 수 있습니다.

5. 결과 파싱 용이성 Langchain은 언어 모델의 출력을 구조화된 형태(JSON)로 파싱하는 기능을 제공합니다.

6. 이를 통해 모델의 응답을 쉽게 처리하고 원하는 형식으로 변환할 수 있습니다. 특정 필드나 형식으로 결과를 받고 싶을 때 유용하며, 일관된 출력 형식을 유지하는 데 도움이 됩니다.

8. 체인 구성 복잡한 워크플로우를 체인으로 구성할 수 있어, 웹 페이지 내용 추출, 요약, 관련 정보 검색 등의 작업을 하나의 프로세스로 묶어서 관리할 수 있습니다.

10. '모델 교체 용이성 Langchain을 사용하면 다양한 언어 모델을 쉽게 교체하여 사용할 수 있습니다.

11. 현재는 Upstage Solar LLM 모델을 사용하고 있지만, 향후 다른 모델로 전환하거나 여러 모델을 병행하여 사용할 가능성이 높다고 생각했고,

12. 모델 교체가 필요한 경우 Langchain의 추상화 계층을 통해 손쉽게 교체할 수 있습니다.

이런 장점을 가지고 있지만, 저희 서비스 아키텍처 상 아쉬운 부분도 존재했습니다.

1. AWS Lambda 배포 시 번거로움 AWS Lambda에 배포할 때 Langchain을 위한 별도의 레이어를 구성해야 하는 번거로움이 있었습니다.

2. 이는 배포 프로세스를 복잡하게 만들고 초기 설정에 추가적인 시간과 노력이 필요했습니다.

3. 특히 여러 의존성 때문에 용량이 빠듯하게 레이어를 구성하다 보면 배포 과정에서 발목이 잡히는 경우도 몇 번 있었습니다.

👍 재미있었던 것은 무엇이었나요?

초반에는 단순히 맛집을 소개하는 웹사이트를 가져와 간단하게 정리해주거나, 여행 일정을 짜는 데에 유용할 것이라는 아이디어에서 시작했어요.

하지만 프로젝트를 진행할수록 개인 용도뿐만 아니라 전문 리서치 분야나 확고한 목적을 가지고 수행하는 딥한 웹서핑에도 크게 도움이 될 것이라는 생각이 들더라고요.

본인이 하고자 하는 업무에 집중할 수 있도록 도와주는 건 덤이고요.

단순한 아이디어가 고급화된 전략(?)으로 디벨롭되어가는 과정, 스케치에서 스크립트로 바뀌어가는 과정을 바라보는 게 꽤나 짜릿한 경험이었다고 생각합니다.

👎 아쉽거나 어려웠던 점은 무엇이었나요?

생각보다 LLM의 성능이 따라주지 않을 때 많이 힘들었던 것 같습니다.

웹페이지 내용을 목차를 매긴 다음 그에 맞게 요약을 생성해달라고 했는데, 엉뚱한 내용을 가져오거나 존재하지 않는 내용을 멋대로 지어서 출력하는 경우가 종종 있더라고요.

그래서 최적의 결과를 만들기까지 프롬프트와 json으로 출력되는 방식을 꽤 오래, 여러 번 시도했던 것 같습니다.

💯 앞으로의 계획을 알려주세요

저희는 지금 두 번째 업데이트를 준비하고 있어요. 이제 첫걸음이라고 생각합니다. 시

장에 반응이 있을 때까지 여러 방면으로 문을 두드려볼 생각이에요.

맞다고 생각하는 방향으로 여러 번 시도하다 보면, 한번쯤 물꼬가 트일 때가 있을 거라고 확신하고, 저희는 그 기회를 놓치지 않고 잡아볼 생각으로 열심히 몰두 중입니다!

슬래시노트에 많은 관심 부탁드려요! 지금 크롬 웹스토어에서 무료로 사용해볼 수 있습니다🙂

https://chromewebstore.google.com/detail/slashynote/blbflmjjpagckbpjddanjfnkceklihlo?hl=en&utm_source=ext_sidebar