์ฌ๊ธฐ ์์ ํต์ฌ๋ง ๋ฝ์ ๋ง๋ ํ๊ตญ์ด X-์ค๋ ๋ โ โ์น ๊ฐ๋ฐ์ ์คํ ํ์ผ๋ฟ์ผ๋ก: BrowserTools MCP ร Cursorโ
@recallnet
1/ ํ
๋ง: IDE(์: Cursor)์ ๋ธ๋ผ์ฐ์ ๋ฅผ MCP๋ก ์ฐ๊ฒฐํด, ์ฝ๋ ์์ฑโ์คํโ๋๋ฒ๊น
โ๊ฒ์ฆ๊น์ง ํ ํ๋ฆ์ผ๋ก ์๋ํํ๋ค. YouTubeCursor
2/ ์ ํ์ํ๊ฐ: ๋ชจ๋ธ์ ๋ธ๋ผ์ฐ์ ๋งฅ๋ฝ์ด ์์ผ๋ฉด ์ฌ์ค์ ๋๊ฐ๋ฆฌ๊ณ ์ฝ๋ฉ. MCP๋ก ์ฝ์ ๋ก๊ทธยท๋คํธ์ํฌ ์์ฒญยทDOMยท์คํฌ๋ฆฐ์ท์ IDE๋ก ๋์ด์์ ์ ํ๋๋ฅผ ์ฌ๋ฆฐ๋ค. CursorGitHub
3/ ๊ตฌ์ฑ์์(์ํคํ
์ฒ): ํฌ๋กฌ ํ์ฅ(๊ด์ธก) โ ๋
ธ๋ ์๋ฒ(๋ธ๋ฆฌ์ง) โ MCP ์๋ฒ(ํด ์ ๊ณต). ํ์คํ๋ ํด๋ก AI ํด๋ผ์ด์ธํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ ๋ํํ๋ค. GitHub
4/ ์ค์นยท์ฐ๋ ํ๋ฆ: โ ํ์ฅ ์ค์น โก MCP ์๋ฒ ๋ฑ๋ก โข IDE์์ ์ฌ์ฉ ์์. Cursor ๊ฐ์ด๋์๋ ๋ธ๋ผ์ฐ์ ๋๊ตฌ MCP ์ธํ
์ด ๋ช
์๋ผ ์๋ค. browsermcp.ioCursor
5/ ๊ฐ๋ฅํ ์ก์
: URL ์ด๋, ํด๋ฆญ, ์
๋ ฅ, ๊ธฐ๋ค๋ฆฌ๊ธฐ, ๋๋๊ทธยท๋๋กญ, ์คํฌ๋ฆฐ์ท, ์ฝ์ ๋ก๊ทธ ์์ง ๋ฑ. ์ค์ฌ์ฉ์ ํ์ํ ๋ธ๋ผ์ฐ์ ์กฐ์์ด ๊ธฐ๋ณธ ์ ๊ณต๋๋ค.
6/ Dev ๋ฃจํ ์๋ํ: ์ฌ์ดํธ ๋์ฐ๊ณ ์ฝ์ ์๋ฌ ์บก์ฒ โ ์ฝ๋ ํจ์น โ ์ฌ๊ฒ์ฆ์ ๋ฐ๋ณต. Lighthouse ๊ธฐ๋ฐ ์ฑ๋ฅยท์ ๊ทผ์ฑยทSEO ๊ฐ์ฌ๋ ํ ๋ฒ์ ๋๋ฆด ์ ์๋ค. GitHub
7/ Next.js ์นํ: Next.js SEO ํ๋กฌํํธ์ ๊ฐ์ฌ ๋๊ตฌ๊ฐ ํฌํจ๋ผ ํ๋ ์์ํฌ ํนํ ๊ฐ์ ํฌ์ธํธ๋ฅผ ๋น ๋ฅด๊ฒ ์ ์ํ๋ค. GitHub
8/ Debugger Mode / Audit Mode: ๋๋ฒ๊น
ยท๊ฐ์ฌ ํด์
์ ์ ํด์ง ์ํ์ค๋ก ์คํํด ๋ฐ๋ณต ์์
์ ์ค์ธ๋ค(์๋ ๋ถ์ฌ๋ฃ๊ธฐ ๋ฑ ํ์ง-of-life ์
๋ฐ์ดํธ ํฌํจ). GitHub
9/ ๋ก์ปฌยทํ๋ผ์ด๋ฒ์ยท์๋: ๋ด ๋ธ๋ผ์ฐ์ ํ๋กํ๋ก ์คํ๋๋ ๋ก๊ทธ์ธ ์ํ ์ ์ง, ๋คํธ์ํฌ ์ง์ฐ ์ต์ํ, ๊ธฐ๋ณธ์ ์ธ ๋ด ํ์ง ์ฐํ๊น์ง ์ด์ ์ด ์๋ค.
10/ ์ ์ค์ผ์ด์ค: E2E ํ
์คํธ, ํผ ์๋ํ, ๋ฐ์ดํฐ ์์ง, SEO/ํผํฌ๋จผ์ค ๊ฒ์ฆ. IDE์์ ์ง์ํ๋ฉด MCP๊ฐ ์ค์ ๋ธ๋ผ์ฐ์ ์์ ์ฌ์ฉ์ ํ๋ก์ฐ๋ฅผ ์ ๊ฒํ๋ค. browsermcp.ioapidog
11/ ์ธ์
ํฌ์ปค์ค: Recall์ WIP at Recall ์๋ฆฌ์ฆ์์ ์ด ์คํ์ผ๋ก ์น ๊ฐ๋ฐ ์คํ ํ์ผ๋ฟ์ ์์ฐโ๋๊ตฌ ์ฐ๊ฒฐ์ด ๊ณง ์์ฐ์ฑ์ ํต์ฌ์ด๋ผ๋ ํฌ์ธํธ. YouTube
12/ ๊ฒฐ๋ก : ๋ธ๋ผ์ฐ์ ๋งฅ๋ฝ์ IDE๋ก ๋์ด์ค๋ ๊ฒ์ด ์ฝ๋ ํ์ง์ ์ข์ฐํ๋ค. MCP๋ก โ์ฝ๋โ๋ธ๋ผ์ฐ์ โ์งํโ๋ฅผ ํ ๊ณ ๋ฆฌ๋ก ๋ฌถ์ผ๋ฉด, ๋น๋ ์๋์ ์ ๋ขฐ๋๊ฐ ๊ฐ์ด ์ค๋ฅธ๋ค. CursorGitHub
๐ฅ ํ์์: WIP at Recall: Putting Your Web Dev on Autopilot with BrowserTools MCP and Cursor Agent. YouTube