- next.js 프로젝트 생성
windows powershell 터미널에서 npx create-next-app으로 next.js 프로젝트를 생성했다. shadcn은 해당 프로젝트 폴더 내부에 설치 후 mcp 서버 정보를 추가해야 한다.
- shadcn/ui 설치 및 mcp 서버 연결
생성한 next.js 프로젝트 내부에 shadcn을 설치 후 mcp.json 파일을 생성해 넣으면 shadcn mcp 서버가 연결된다. 연결한 서버 정보는 오른쪽 탭에서 확인이 가능하다. 서버 가동법은 피그마 mcp와 동일하게 설정 아이콘을 누르고 start server를 클릭하면 된다.
- shadecn ui로 페이지 생성하기
피그마 mcp를 사용하듯 #으로 특정 툴을 불러와 써도 되고, #shadcn으로 전체 툴을 호출해도 무방하다.
처음 서버를 개시했을 때에는 툴을 잘 몰라서 #shadcn으로 호출하고 프로필 UI 화면을 만들어달라고 요청했다. 결과물은 첫 시도치고 제법 괜찮게 나왔다. shadcn의 기존 컴포넌트 또한 요청사항에 맞게 자동으로 설치해준다.
- 실험 1 - UI 이미지 구현
Gitgub Copliot은 스크린샷 이미지를 첨부할 수 있다. ComfyUI로 생성했었던 UI 이미지 하나를 캡처해 스크린샷을 첨부하고 #shadcn을 호출해 그대로 구현해달라고 요청했다. 첨부한 이미지를 읽고 어떤 UI인지 분석하는 모습을 확인할 수 있다.
구현율은 그리 높지 않다. shadcn의 기존 컴포넌트 스타일과 맞지 않는 파스텔톤 3D UI인데다, 분석하기 어려운 이미지를 제공해서 그렇다고 판단했다.
- 실험 2 - 피그마 디자인 구현 (피그마 MCP + shadcn MCP)
이미지는 읽기 어려우니 피그마 MCP 노드값을 읽게 만들면 더 쉽지 않을까 싶어졌다. 해서 피그마 MCP 서버도 함께 켜서 두 개를 동시에 돌려보기로 했다. 피그마 MCP는 #get_code 툴을, shadcn은 #shadcn 호출을 사용해 한 프롬프트에 두 개를 함께 사용해보았다. 피그마 MCP 툴로 먼저 디자인을 분석한 후, shadcn MCP가 필요한 컴포넌트를 설치하는 모습을 볼 수 있었다.
디자인은 iM뱅크 시안 화면을 사용했다.
이미지만 첨부하고 구현하게 만든 첫번째 실험과 비교하면 구현율이 조금 나아진 것을 확인할 수 있었다. 이미지만 보고 만들라고 던지는 것보다는 피그마 MCP를 함께 사용하면 퍼블리싱 작업에 도움이 많이 될 것으로 보인다.
다만 실 프로젝트에 적용하기에는 한계점이 하나 있는데, shadcn이 node.js 기반 라이브러리라는 점이다. node.js 기반 프론트엔드 프로젝트는 현재 전자정부프레임워크에서 사용하기에는 적합하지 않다. jsp 혹은 php 언어로 변경해 사용하기 위해서는 html/css/js를 사용하는 것이 제일 편하고 빠른데, 이렇게 되면 shadcn MCP 사용이 어려워진다.
피그마 MCP와 함께 사용할 수 있으면서도 html/css/js 작업에 적합한 라이브러리 및 MCP를 찾는 것이 다음 과제가 될 것이다.