목차(클릭하세요)
Aside는 단순히 AI 기능이 추가된 브라우저라기보다, 브라우저 자체를 도구로 사용하는 AI 에이전트에 가까움.
웹에서, 브라우저에서 사람이 하던일을 API연결없이 모두 자동화할 가능성이 열림
[참고자료]
1. Aside CLI 설정(skill&MCP)
•
Aside CLI란? Claude Code나 Codex 같은 코딩 에이전트가 Aside 브라우저를 도구처럼 호출하도록 연결하는 인터페이스
•
이를 통해 코드 구현 후 실제 브라우저에서 화면을 확인하거나, 테스트를 실행하고 스크린샷을 수집하는 작업을 하나의 흐름으로 처리할 수 있음
1-1 Aside CLI 설치
•
Aside 앱의 Developer Settings에서 CLI를 설치하거나, 터미널에서 아래 명령어를 실행.
•
macOS와 Windows 설치 방법은 Aside 공식 개발자 문서에서 제공
•
install버튼을 눌러 설치
•
[방법1]설치를 위해 Aside Skills를 다운로드 받아, 설치할 수도 있고
•
[방법2]ClaudeCode와 Codex만 눌러주면 바로 스킬이 셋팅되는 마법을 볼 수 있음
◦
개인적으로 편의성 차원에서 방법2를 선택
1-2 Claude Code에 Aside 연결하기(MCP)
•
Claude Code에서는 Aside CLI를 로컬 MCP 서버로 등록
•
MCP는 에이전트가 외부 도구를 사용할 수 있게 연결하는 방식이며, Claude Code는 로컬 stdio 서버 등록을 지원
[모든 프로젝트에서 사용]하기 위해 사용자 범위로 등록
아래 MCP를 전역 사용을 위해 설치해봐
{
"mcpServers": {
"aside": {
"command": "C:\\Users\\OOO\\AppData\\Local\\Aside\\CLI\\current\\aside.exe",
"args": [
"mcp"
]
}
}
}
Bash
복사
•
등록 여부를 확인하기
claudemcplist
Bash
복사
•
이후 Claude Code를 다시 실행하고, 아래처럼 브라우저 작업을 요청해보기
Aside를 사용해서 현재 내 시청기록 중 가장 관심있는 주제 Top3를 정리해봐
Plain Text
복사
1-3 Codex에 Aside 연결하기
•
Codex도 동일한 방식으로 손쉽게 MCP연결 가능
아래 MCP를 전역 사용을 위해 설치해봐
{
"mcpServers": {
"aside": {
"command": "C:\\Users\\OOO\\AppData\\Local\\Aside\\CLI\\current\\aside.exe",
"args": [
"mcp"
]
}
}
}
Markdown
복사
•
등록 후 Codex를 다시 실행
•
설정을 직접 관리하려면 ~/.codex/config.toml에 아래 내용을 추가할 수도 있음
•
Codex에서는 다음과 같은 요청으로 활용할 수 있음
구현한 기능을 검토한 다음 Aside로 localhost:3000을 열어 브라우저 테스트를 해줘.콘솔 오류, UI 깨짐, 주요 사용자 흐름을 확인하고 수정이 필요하면 우선순위를 정리해줘.
Plain Text
복사
2.연결 확인용 첫 작업(Multi Site Searching task)
2-1.여러사이트에서 한꺼번에 정보를 수합해야 하는 Task
•
현재 내가 구독중인 AI&에듀테크 관련 구독현황을 총정리하기
claude subscription, codex subscription, gemini subscription, youtube subscription, 패들렛, 전부 확인하고 구독료, 구독날짜, 그리고 남아있는 api credit 까지 취합해서 보고해줘
Markdown
복사
•
일단 사람이 하려면 위 예시 프롬프트에서 제시된 5개의 사이트를 모두 하나씩 들어가서 로그인된 브라우저를 통해 정보를 확인해야 하는 속칭 ‘노가다성 Task'
•
Aside가 가지는 장점 중에 하나는 이런 task를 병렬로 동시진행 한다는 점
•
이 작업이 불과 5분도 걸리지 않았음
2-2.구글 드라이브 업로드
•
이제는 당연히 이런 결과물을 Docx로 뽑는 것은 문제가 아니니, 구글 드라이브 연동 자동업로드가 되는지 확인
•
이렇게 구글드라이브 주소를 모두 주면 Aside뿐만 아니라 다른 AI도 가능할테니..
•
일부러 주소를 주지 않도 상대경로의 일부만 제시해보기
[예시 프롬프트]
내 구글드라이브에 방금 만든 파일 업로드 가능하니?
AI폴더에 Aside드라이브 만들어 두었어.
Markdown
복사
•
결과는? 당연히 OK!
3.카카오톡 제어하기(codex vs Aside)
3-1.목표 작업_광고로 의심되는 채팅방을 특정폴더로 이동시키기
•
참고로 codex computerUse로 당연히 가능할 것이지만, 동일한 task를 주었을 때 각각 어떤 유의미한 차이가 나올지 예상해보기
•
Aside에서 시도한 결과
◦
확실하게 브라우저가 아닌 앱(app)단위 작업은 시작할 수 없었음
•
codex에서 진행한 결과
•
Computer Use를 사용할때 나는 마우스로 다른 작업을 하는 것이 불가능
•
약 10여분의 시간이 흐른뒤, 내가 원했던 기능을 거의 완벽하게 수행
•
폴더에 ‘광고’관련 채팅을 옮기는 것이 목적이였으나, 옮기는 것은 안되고, 추가 기능만이 있어서. 원상복귀
4.논문검색 사이트(DBpia, 구글 scholar등)
•
설정한 Task:내가 원하는 주제의 논문 10편 인용수 순위로 다운로드 받기
[예시 프롬프트]
구글 스칼라와 DBPia논문 사이트에서 'Agent'관련 논문, 특히 교육분야에서 AI Agent에 대한 논문을 각각 5개씩 다운로드해, 각 논문의 우선순위는 인용수 순위로 설정하자.
Markdown
복사
•
역시나 병렬모드로 작업을 시작
•
Agents의 작업을 볼때 가장 중요하는 보는 것이 바로 task를 어떻게 세분화 하는가?에 대한 부분
•
현재 작업 진행상황을 확인할 수 있는 부분이 클로드코드나 codex에 비해 좀 더 직관적인 부분이라 느껴짐
•
해당 task에서 얼마 정도의 토큰을 소모 중인지, 내가 연결한 서비스의 토큰 사용량도 바로 확인 가능
•
특정 task를 위해 화면 캡쳐도 중간중간 알아서 진행
•
실제 파일까지 다운로드
◦
브라우저에서 하는 모든것들을 위임할 수 있다는 증거
◦
Codex의 Computer Use보다 task완료 속도가 확실히 빠를 수 밖에 없는것은 내부 작동 방식이 완전히 다름
•
물론 Aside역시 권한 및 응답지연 등 다양한 이슈로 인해 한번씩 인간의 개입이 필요하긴 함
5.Aside사용기
5-1. Aside가 웹 작업을 더 빠르게 처리할 수 있는 이유
•
화면에서 버튼 위치를 찾아 누르는 방식과, 버튼의 이름·역할을 읽어 코드로 조작하는 방식의 차이
•
Windows Computer Use는 스크린샷과 Windows UI 정보를 확인하고, 마우스·키보드 입력을 보내 앱을 조작함.
•
Aside는 웹페이지의 버튼·입력란 정보를 정리한 ‘접근성 트리’를 읽고, Playwright 문법의 코드로 브라우저를 제어함.
◦
필요한 정보만 추려 AI가 읽을 분량을 줄임.
◦
코드로 반복 작업을 표현할 수 있어, 화면을 보고 한 단계씩 판단하는 부담을 줄일 수 있음.
◦
백그라운드 탭과 고정된 화면 크기를 사용해 사용자 조작에 따른 간섭을 줄이도록 설계됨.
5-2.Aside도 아직 개선이 필요
•
작업 속도 및 해당 사이트 서버의 사용량 제한 등 여러 이슈로 한번씩 Task진행여부를 인간이 관찰해줄 필요가 있음
•
실제로 DBpia사이트에서 논문을 다운로드 받기 위해, 10분간 에러를 발생시켰으나, 직접 다운로드 방식으로 작업 방식 전환을 권고할 필요도 있음
•
직접 다운로드 방식도 막혀있어, ‘서재’에 논문 목록을 저장한 후, ‘다운로드’하는 방식으로 진행하여 최종 task 완료
•
이제는 Supervisor나 Inspector로서의 역량도 필요해지는 시점
5-3.Aside에 추가되었으면 하는 기준들
•
기기간 동기화 (Devices sync)기능은 제공하고 있지 않음
◦
A디바이스에서 셋팅한 모델(클로드, GPT 등)을 새로운 디바이스에서 사용하려면 다시 셋팅해야 한다는 이야기
◦
Aside는 기본적으로 "local-first" 철학이에요. 작업 기록, 메모리, 설정이 모두 기기 로컬에 저장되고 클라우드로 동기화하지 않는 게 기본 설계
•
현재 별도의 크롬창을 활용해 작업을 처리하는 방식이므로 교육청의 업무포털, 나이스와 같은 서비스는 사용불가
◦
뭔가가 막혀있고, 언제 풀릴지 모르는 기능들
◦
결국 나이스 및 에듀파인 자동화는 코덱스의 Computer use를 사용해야 한다는 결론
