소개
바이브코딩으로 사이트를 만들다보면, 사이트가 밋밋하고, 다른 사이트들과 비슷하게 디자인되는 경우가 많습니다. 사이트를 더 이쁘게 만들고 싶은데 프론트 개발자가 아니라 사이트를 원하는대로 만들고 수정하는데 어려움을 겪었습니다.
프론트 랜딩 페이지를 좀 더 눈에 띄게 만들고 싶어서 21st.dev라는 사이트를 이용해 사이트 디자인 변화를 시도해보았습니다.
진행 방법
21st.dev는 랜딩 페이지, 버튼, 사이드바 와 같이 UI에 자주 사용되는 UI 컴포넌트 디자인을 모아둔 사이트입니다.
다른 사람들이 멋있게 디자인한 컴포넌트들을 손쉽게 내 사이트에 적용할 수 있게 해줍니다.
제가 실제로 사용한 방법을 예시로 들면서 사용방법에 대해 설명해 보겠습니다.
21st.dev에서 마음에 드는 디자인 컴포넌트를 고릅니다. 저는 제 페이지의 입력창 디자인이 마음에 안들어서, input창 디자인을 아래 있는 디자인으로 바꾸기로 했습니다.
https://21st.dev/community/components/thanh/animated-input/default
다음, UI 데모 화면 위에 있는 COPY PROMPT를 클릭하여, 클로드 코드에 붙어놓을 프롬프트를 복사합니다.
클로드 코드에 복사한 프롬프트를 붙여넣고, 추가적인 명령을 입력해줍니다. 이때 추가하는 명령은 디테일할 수록 좋습니다.
이렇게 21st.dev 에서 복붙한 프롬프트와 디테일을 추가해서 프롬프트를 입력하면, 클로드 코드가 자동으로 새로운 UI 디자인을 적용해줍니다.
결과와 배운 점
디자인 변경 적용 결과는 다음과 같았습니다. 밋밋한 입력창에서 좀 더 다이나믹한 입력창으로 바뀐걸 확인할 수 있었습니다. 입력창 디자인과 함깨 랜딩페이지 배경도 움직이는 배경으로 설정할 수 있었습니다.
하면서 느낀 점
클로드에게 UI 변경을 요청하기 전, 클로드에게 내가 변경하고 싶은 UI 컴포넌트가 지금 어떤 식으로 구성되어 있는지 먼저 알아봐달라고 요청한 후 UI변경을 요청하면 더 잘 할 수 있을 것 같습니다.
꼭! 기존에 있는 컨텐츠는 유지하고 변경해달라고 요청해야 합니다. 안그러면 기존 구현되에 있던 기능과 UI 를 싹 다 지우고, 컴포넌트 하나만 달랑 구현해버리는 불상사가 발생할 수 있습니다.
21st.dev에서 제공하는 Magic MCP가 있는데 아직은 이 MCP로는 제가 아직 사용법이 익숙하지 않아, 원하는 UI로 변경하는걸 성공하지는 못했습니다.
