3. 인공지능 리팩토링 계획

인공지능 리팩토링 초기 기획

브레인스토밍

브레인스토밍

• 작성되어있는 문서 요약 😡👽🧑🏻‍💻🌷
  • 버튼액션으로 AI기능을 활성화 시키는건 어떨까요
  • 요약내용 Cache 필요 (DB등에 저장)
• 자동 번역 😡🧑🏻‍💻🌷
• 내용 제시하면 자동으로 문서 작성(문법 형식 맞춰서) 🧑🏻‍💻👽
  • 문서를 작성해서 형식 변환
• 챗봇 🧑🏻‍💻👽
  • 챗봇과 대화하면서 문서 완성해나가기
• 웹 접근성 → 우리 페이지 읽어주는 기능 (그러려면 코드에 웹접근성 코드 다 추가해야함)

참고자료

참고자료

노션

• 블록 생성을 통해 AI 사용 또는 챗봇으로 AI 사용

• 챗봇으로 페이지 생성

기획

문서 요약

---

기능

• 사용자는 페이지의 정보를 요약하고 싶을 때 페이지 요약 버튼을 눌러 AI 요약을 수행합니다.
• 요약된 정보는 페이지 상단에 표시하거나, 페이지가 최소화됐을 때 표시됩니다.

동작 방식

• 사용자는 페이지 네비게이션 바에서 “페이지 요약” 버튼을 누른다.
• 클라이언트에서 페이지 내의 전체 블럭을 텍스트로 변환한 후, AI를 사용해 요약을 수행한다.
• 요약된 정보는 헤더 밑에 표시한다.
• 페이지를 최소화했을 때 이 페이지가 요약된 정보가 있을 때, 요약된 정보만을 출력한다.

구현 논의점

• 요약 정보는 클라이언트에 종속해 클라이언트마다 다른 요약 정보를 보이는 것이 좋을까 아니면 페이지에 종속해 모든 클라이언트가 같은 페이지에 대해 같은 요약 정보를 보는 것이 좋을까?

예상 효과

• 사용자가 문서를 추가적으로 정리할 필요가 없음
• 문서 페이지가 최소화됐을 때 전체 내용의 일부를 보는 것이 아닌 요약된 내용을 봄으로써 해당 페이지가 어떤 내용을 담고 있는지 확인 가능
• 한눈에 여러 페이지를 요약한 정보들 확인 가능
• 사용자들이 nocta 서비스를 사용하게 되는 기능으로 유저 수 확보 가능성

자동 번역

---

기능

• 사용자는 원하는 페이지를 다양한 언어로 번역해서 볼 수 있습니다.

동작 방식

• 사용자는 페이지 네비게이션 바에서 “페이지 번역” 버튼을 누른다.
• 클라이언트에서 페이지 내의 전체 블럭을 텍스트로 변환한 후, AI를 사용해 번역을 수행한다.
• 요약된 정보는 새로운 AI 페이지 창에 표시된다.
• 덮어 씌우기, 창 끄고 닫기, 번역 부분 적용이 기능이 가능하다.

예상 효과

• 사용자가 자신이 보고 싶은 언어를 선택해서 문서를 볼 수 있음

문서 작성

---

기능

• 현재 페이지에 작성되어 있는 글 이후로 AI를 사용해 나머지 글을 작성한다.

동작 방식

• AI 버튼을 클릭한다.
• 클라이언트에서 해당 페이지의 텍스트를 AI서버에 전송한다.
• AI를 통해 작성된 텍스트를 클라이언트로 전송해 문서를 마저 작성한다.

예상 효과

• 템플릿 기반의 문서 작성으로 사용자의 진입장벽을 낮추고, 문서 작성에 대한 부담감을 크게 줄일 수 있습니다.
• 매번 새로운 형식을 고민할 필요 없이, 검증된 구조를 바로 활용할 수 있어 효율성이 크게 향상됩니다.

챗봇

---

기능

• AI에게 nocta서비스 전반적인 보조활동 도움받기
• 페이지 요약, 문서작성 방법 등등 기본적인 AI대화 가능

동작 방식

• 챗봇은 사용자의 질문에 따라 단순 답변, 문서 작성, 문서 요약을 수행한다.

예상 효과

• 사용자는 챗봇과 대화하면서 점진적으로 문서 내용을 발전시켜나갈 수 있음
• 챗봇과의 대화를 통해 문서 작성에 대해 새로운 영감을 얻을 수 있음

인공지능 멘토링 피드백

인공지능 멘토링 피드백

• 기능을 추가하면 그 기능을 추가하려는 이유, 왜 그 사람이 이 기능을 사용할지에 대한 이유가 필요하다.
• 문서 요약
  • 일반적으로 사람들은 헤더를 둘러보면서 필요한 정보를 찾는다.
  • 요약은 결국 축약이기 때문에 정보를 잃는다.
  • 헤더를 쭉 훑고 원하는 정보를 찾는 것이 문서 요약을 시키는 것보다 더 빠르다.
  • 정보를 받으러 들어왔는데 정보를 효과적으로 추출하기 위해 AI를 어떻게 써야 할 지 고민해야 한다
  • 문서 요약 기능에 대해 유저 인터뷰를 해 봤을 때 부정적이었다.
  • 타겟 사용자에게 어필할 수 있는 기능인지를 고민해봐야 한다.
• 자동 번역
  • 자동 번역이 그 관점에서 쓸모있어야 한다면 어떻게 해야 할까
  • 문서를 즉시 다른 언어로 변환해야 하는 경우가 잦을까?
  • 다국적 기업들 같은 경우에는 업무에 있어 하나의 언어로 통일한다
  • 내 의도대로 번역이 안 된다(번역의 과정에서 정보의 손실이 발생한다)
  • slang → 특정 집단에서만 사용하는 은어
• 문서 작성
  • 유저들이 의도대로 쓸 수 있을 것인가에 대한 고민은 많이 오래 걸릴 것이다
  • 문서 작성의 경우는 valid하다고 본다 → 문서를 읽고 쓰는 목적에서 쓰기에 해당
  • 문서 작성 쓰는 과정을 빠르게 간소화할 수 있는 기능
  • 대다수의 노션 사용자들은 AI를 이 기능으로 쓴다
  • 기본적인 문서의 구조 잡기, 특정 구조의 일부를 빠르게 채우기
  • 한 번 틀을 잡아준다면 틀린 부분들은 직접 수정할 것이니 정확도는 크게 상관 없다
• 챗봇
  • 챗봇의 경우 목적이 없다
  • 챗봇의 의의에는 모든 페이지 구조를 이해하고 필요한 정보를 쫙 뽑아주는 데에 있을 것이다
  • 문서 요약과 번역은 사용자에게 큰 어필이 되지 않을 것이다
  • 챗봇의 경우 모든 페이지를 읽고 필요한 정보를 뽑아주는 방향으로 개발한다면 좋을 것이다.
• 문서 작성 또는 챗봇을 중심으로 작업하면 좋지 않을까
• 모든 기능에 대해 구현 가능하다고 했을 때, 무엇을 먼저 하고 싶은지를 생각해보면 좋을 것 같다.
• Q. 비용이나 기능 측면에서 ai가 자주 돌아가면 사용성에 문제가 있을 거 같아 ai를 사용하는 데 트리거가 필요하다고 생각이 든다
  • 케바케
  • 유저에게 방해가 되지 않으면서도 유저에게 도움을 줄 수 있는 부분이라면 트리거 없이 자동으로 적용해도 될 것 같다
  • 문제는 비용, 회사의 의사결정에는 이 점이 가장 크다

OpenAI를 어떻게 사용하는가

• https://platform.openai.com/docs/overview
• model
  • GPT 모델
  • 어지간하면 4o 써라
• store
• messages
  • role
    • system : 전처리
    • user : 사용자
    • assistant : AI
  • content
    • type : text, json, …
• response_format
  • 답변을 특정 형태로 강제
  • text
  • json_object
  • json_schema ← 강력 추천
• temperature
  • 모델이 얼마나 창의적인가
  • 값이 낮을수록 동일한 답변을 뽑을 확률이 높다
  • 값이 높을수록 같은 질문에서도 다양한 답변이 나올 확률이 높다
• max_tokens
  • 모델이 뽑을 수 있는 최대 길이
  • 비용 컨트롤
  • https://platform.openai.com/tokenizer
  • https://openai.com/api/pricing/
• 인공지능이 했던 이야기를 전부 기억해야 하기 때문에 각 대화는 독립적이다
• platform.openai.com에서 커스텀한 후 코드를 바로 받아볼 수 있다
• 시스템의 구조를 프롬프터로 잘 설명하면, 그것을 서비스에 바로 적용할 수 있다
• 이 방식은 OpenAI나 Clova나 똑같이 작동할 것이다

취업 관련 피드백

• Q. 개발자 취업에 있어서 채용 형식이 다양해지고 있는데 어떤 부분을 어필하는 것이 중요한가
  • 실력이 드러날 수 있는 부분
    • 인턴
  • 인공지능의 출현 때문에 하나의 개발자가 많은 일을 할 수 있어졌기 때문에 많은 역량을 요구하고 있는 것 같다
  • 경제가 침체되고 투자가 돌지 않아서 채용 시장이 얼어붙었다
  • 중고신입 ← 바로 우리 회사에 들어와서 즉시 전력으로 뛸 수 있는
  • 나만의 엣지를 찾으려면?
    • 프로젝트를 극한까지 몰고가기
    • 너희가 이력서 포폴을 얼마나 이쁘게 꾸미던 아무 상관 없다
      • 이력서 보는데 2분밖에 안걸린다
    • 이력서를 보다보면 비슷비슷한 게 보인다
      • 똑같은 기술스택
      • 똑같은 문제해결
    • 자잘한 프로젝트를 여러 개 한 개발자보다 하나의 프로젝트를 깊게 파서 여러 문제해결을 해 본 개발자를 더 선호한다
  • 적은 수의 개발자가 AI를 끼고 일하기 > 많은 수의 개발자가 AI 없이 일하기
  • 나 프로젝트 많이 해봤다 ← 의미없다
  • 철학, 백그라운드 지식, 깊은 지식
  • 프로젝트의 개수, 방향 ← 기본빵만 쳐라
  • 내가 얼마나 깊이 사고했는가, 내가 얼마나 효율적으로 문제를 해결했는가
  • 그런 사람들은 이력서를 보면 보인다
  • 100장의 이력서를 보면 5장도 채 남지 않는다
  • 진심으로 한두 프로젝트를 깊게 파고들어서 엄청나게 높은 이해를 가지는 것
  • 그 과정에서 발생한 문제를 조리있게 설명하는 것
  • 스타트업에서 프론트엔드와 백엔드를 둘 다 볼 수 있는 사람들을 많이 찾는다
• Q. 저희 프로젝트는 깊이가 느껴지나요?
  • 상상한 형상을 구현하기 위해 다양한 챌린지를 마주했을 것 같고, 그것을 잘 풀어냈을 것 같다.
  • CRDT 동시편집을 어떻게 구현해볼까에 대한 고민
  • 어떻게 하면 DB에 다 저장할 수 있을까
  • 제가 본 프로젝트 중에서는 상위권에 속하는 것 같다
  • 면접관에게 적절한 서사를 잘 녹여낸다면 좋을 것 같다
  • 잘 꾸미고 서사를 잘 만들어낸다면 좋은 결과가 있을 것 같다

인공지능 리팩토링 기획

초기 기획에서의 변경점

• 문서 작성 기능에 집중하기
  • 기존 기획으로 제안한 문서 요약, 자동 번역, 챗봇의 경우 타겟 사용자에게 충분히 어필하기 어려움
  • 팀원들의 일정 등을 고려했을 때 문서 작성 기능 하나를 설계하고 구현하는 데 공수가 충분히 들 것으로 예상됨

세부 기획

• 우측 하단에 AI 버튼 추가
  • AI 버튼을 누르면 그 위에 채팅 Input 바 생성
• AI는 요청에 따라 새 페이지 생성 후 내용 작성
  • AI로 생성된 페이지는 전용 아이콘을 가진다

인공지능 리팩토링 설계

기능 명세

• 문서 작성
  • 사용자가 AI에게 특정 내용으로 문서를 작성하라고 요청함
  • AI는 요청한 내용에 따라 문서를 작성함

프론트엔드

• AI 기능에 대한 UI 추가
• CLOVA Studio API 연동
• AI에게 받은 마크다운 문서를 CRDT 연산으로 변환
  • 마크다운 문법 → CRDT operation 변환(client)
• AI가 만든 페이지는 아이콘으로 분류

AI

• 프롬프터 튜닝
  • 사용자에 요구에 맞는 내용을 마크다운 형태로 전환