11월 9일

오늘 공부에 투자한 순수한 시간: 3시간 (마인드맵 작성시간 포함)

학습한 개념

1.aside란 무엇인가?
Y combinator 2025년 가을 배치 출신 스타트업이 만든 ai 브라우저로, 여러 연동을 연결하게 하는 대신 사람처럼 웹을 직접 써서 이메일, 대시보드, 사내도구에 로그인해 일을 처리하는 방식. chrome확장 프로그램이 아니라 chromium기반의 독립 데스크톱 앱.

  1) 구성
브라우저 에이전트 : 로그인된 페이지를 포함해 웹사이트를 조작하며, 페이지 열기, 폼입력, 파일 다운로드, 로컬 문서 스프레드시트 작업이 가능하다고 회사는 주장함.
메모리 : 과거 작업과 방문 기록을 사용자 기기에 로컬로 저장
비밀번호 관리 : Aside Vault가 비밀번호를 모델에 노출하지 않고 채워 넣음
과금 : 별도 ai요금 대신 본인의 claude나 gpt구독을 연결해서 쓰는 방식

  2) 이름의 유래
추정하자면 영어 aside는 옆사람만 듣게 하는 귓속말 이라는 뜻이 있어서 지금의 ai가 내 옆에서 일한다는 의미로도 자연스럽게 이어진다. 그리고 실제로 우측 상단 Ask Aside버튼을 누르면 열려있는 사이트 오른쪽에서 바로 ai와 대화하는 구조라 화면 옆에 붙어 일하는 조수라는 의미로 추정된다.

정리하자면 LLM에이전트는 : 두뇌
aside는 : 손발

2. IDE란 ?
IDE(Intergrated Development Environment 통합 개발 환경)
= 코드짜는데 필요한 도구를 한프로그램에 모아 놓은것.

   1) IDE가 모아둔 것들
- 편집기 : 코드작성, 색깔구분, 자동완성
- 실행 : 버튼 하나로 코드 돌려보기
- 디버거 : 오류가 어디서 났는지 한 줄씩 따라가며 확인
- 터미널 : npm 명령어 같은 걸 같은 창에서 입력
- 파일 탐색기 : 프로젝트 폴더 구조 한눈에 보기

대표적인것 (vs code, cursor, Xcode)
vs code : 프론트엔드에서 가장 많이씀
실제로 이번 웹 만들기 때 사용했음
cursor : vs code기반에 ai가 붙은 버전
바이브코딩 때 주로사용함
X code/ Android studio : iOS, 안드로이드 앱 전용

  2) npm도 명령어인데 IDE와 구분

IDE : 코드를 작업하는 공간/하는일 :  코드쓰기, 실행, 오류찾기 / 형태 : 창이 있는 프로그램 / 비유하자면 주방
npm : 패키지 남이만든 코드를 관리하는 도구 / 하는일 : 라이브러리 설치, 삭제, 버전관리, 스크립트 실행/ 형태 : 터미널에서 치는 명령어 / 비유하자면 식자재 배달앱

즉, IDE는 npm을 쓰는 장소이고, npm은 그안에서 쓰는 도구중 하나이다.

  3) IDE 역사
1단계
1983 Turvo Pascal : 싸고 빠른 IDE로 개인 개발자에게 대중화. 편집하다 바로 컴파일 실행되는 경험이 충격이었음
2단계
1991 visual Basic (마이크로소프트) : 버튼 창을 마우스로 끌어다 놓으면 화면이 만들어짐. 코딩 문턱을 크게 낮춤
1997 visual studio : 여러 언어 도구를 하나로 합친 마이크로소프트 대표의 IDE
3단계
무겁고 강력한 IDE 전성기
2001 Eclipse, IntelliJ IDEA (Java 중심 IDE 시대)
2003 Xcode (Apple), 2013 Android Studio (Google, IntelliJ 기반 -모바일 앱 시대 전용 IDE
4단계
2015 VS Code (Microsoft, 무료): 가벼운 에디터 + 필요한 기능만 확장 프로그램으로 추가하는 방식
5단계
2021 GitHub Copilot: 다음 코드를 AI가 예측해서 제안

2023 Cursor: VS Code 기반에 AI를 깊게 통합

2025~ 에이전트형 도구 (Claude Code 등): 한 줄 제안을 넘어 여러 파일을 직접 고치고 실행까지 하는 단계

정리하자면 IDE는 사람이 코딩하기 편한 도구 에서 출발해서 지금은 ai가 코딩하고 사람이 검토하는 도구로 바뀌는중.

그리고 현재는 사실상 vs code가 대표 도구

3. Orca
:AI 코딩 에이전트 여러 개를 동시에 굴리는 IDE
각각 독립된 작업 공간에서 관리하는 도구이다.

Aside와 구조가 또같다.
orca는 ai모델이 아니고, 이미 쓰는 claude,codex 등 구독을 가져와서 돌림
Aside가 브라우저+내구독 이라면, Orca는 IDE+내 구독 형태

  1) VS code, Cursor와 무엇이 다를까?
- cursor: ai 한명과 대화하며 코딩
-Orca ai : 여러명에게 각각 일을 맡기고 사람은 감독, 검토한다.

  2) 핵심 기능 
- 워크트리 : 에이전트 마다 프로젝트 복사본을 따로 줘서 서로 코드를 덮어 쓰지 않게한다. (요리사 3명에게 각자 도마를 주는것과 같음)
-ai변경사항 검토 : ai가 고친 코드 줄에 바로 코멘트를 달아서 다시 에이전트에게 수정을 요청
-디자인 모드 : 앱 미리보기에서 UI요소를 클릭하면 그게 바로 AI 채팅에 맥락으로 들어감

*워크트리(worktree) 하나의 프로젝트를 여러 폴더에 동시에 펼쳐놓고 각 폴더에서 다른 작업을 하는 git기능

각자 다른작업을하고 같은 git저장소를 공유
충돌이 없다. 다끝나면 결과만 원본에 합치면된다.

3) 충돌은 안일어날까?

작업하는 동안은 각자 자기 폴더만 건들기때문에 발생안함. 하지만 합칠 때 발생가능성
같은 영역을 맡기게 되면 각자 폴더에선 문제가없고 git에서도 다른줄이라 충돌이 안일어남. 그런데 합치면 깨짐. 그래서 실무에선 애초에 다른 영역을 맡기는게 원칙

4) 서로 검수시켜도되?
가능. 실제로 많이 쓰는 방식

AI 대화 내역 링크: https://claude.ai/share/5340b4e0-42f7-440f-96c1-20115e14d509

ClaudeShared via Claude, an AI assistant from Anthropicclaude.ai

(링크 생성 방법)

오늘 잘한 점: 마인드맵하며 같이 정리해보았습니다. 그래서 조금 시간이 걸렸습니다. 좀 간략한느낌인데 더 살을 붙여보겠습니다.

오늘 부족했던 점: 이번주가 실제론 4주차인데ㅠㅠ 3주차에 머물러있습니당 열심히 해보겠습니다.

오늘 총평: 오늘 멘토님과 수업하고나서 알고있는 부분은 마인드맵 부분 정리하고, 모르는부분은 공부하고 마인드맵까지 작성해봤습니다. 그런데 우와 진짜 신기하다 하면서.. 공부했습니다. 아직 원리는 정확하게 모르겠어서 말씀해주신 원리 게시글도 봐야겠습니다.
Aside도 신기하고 (기술들이 신기했습니다. 예를들면 노출하지 않고 비밀번호 자동입력이라던지 그리고 클로드는 자꾸 물어보는데.. 자세하게 설명하지 않아도 스스로 조작한다는것도 저는 신기했습니다! ) IDE도 신기하고 실제로 제가 쓰던 것들이 많이나와서 아 이런거였구나 하면서 공부했습니다. 그러다 어렴풋봤던 orca도 조금 클로드에게 물어보고 공부했습니다. 자세히 알면 머리아프겠지만 아직까진..?! 오늘 공부도 흥미로웠습니다.