2023년도 몇 시간 남지 않은 지금, 또 회고 글로 날먹을 할 수 없기에 요즘에 알게된 쏠쏠한 팁을 공유하고자 합니다.
프론트엔드 개발을 하다보면 아무래도 가장 중요한게 디자인 입니다. 웹 디자이너분이 계신다면 정말 좋겠지만, 모든 상황에서 그러기는 힘들죠!

다행히도 요즘에는 AI 기술이 대두되면서 디자인을 해주는 AI들도 여럿 등장했는데, 이제는 웹 디자인까지 해주는 친구가 생겼습니다.
사실 Microsoft Designer와 같은 친구들도 있지만, 이게 좀 더 좋은 것 같아서 소개를 해보려고 합니다!

• v0.dev

소개드릴 사이트는 바로 v0이라는 사이트입니다. Vercel에서 공개한 사이트로, AI를 통한 웹 디자인을 제공하는 사이트입니다.
프론트엔드 개발자분들에게는 Vercel이 낯설지는 않으실거라고 생각합니다. Next.js의 개발사이기도 하니까요!

들어가게되면 여러 예제들이 우리를 반겨줍니다. 기본적으로 프롬프트를 통해 원하는 디자인을 작성할 수 있고 + 앞서 말한 예제를 사용하셔도 됩니다.

저는 테스트용 주제로 Personal Tech blog 라는 키워드를 넣었습니다!

직접 만들어보면 생성되는 속도에 놀라게됩니다. 생각보다 빠르게 생성되기도 하고 생성된 디자인에 대해서 상호작용도 정상적으로 이루어집니다!
무엇보다 마음에 들지 않는 부분들은 아래 프롬프트 혹은, 프롬프트 옆에 있는 마우스 버튼을 통해 개발자모드에서 태그 확인하는 것 처럼 선택할 수 있습니다!

가장 큰 장점이라고 생각하는 부분입니다. 빠르고 간단하게 해당 디자인 코드를 복사 / 설치할 수 있습니다.
명령어를 통해 프로젝트에 적용할 수 있는 부분은 사용자의 편의성까지 고려해준 부분이라 매우 좋네요!

또한 기본적으로 tailwindCSS가 적용된 코드를 제공해주는데, tailwindCSS를 사용하고 있는 저의 입장에서는 특히 좋은 기능이라고 할 수 있겠네요 :)
그 외에도 기본적으로 코드를 시맨틱하게 나눠놓은 걸 확인할 수 있습니다.

한편으로는 Vercel에서 생각하는 스타일의 코드로 작성되었다고 생각해볼 수도 있을 것 같네요! 해당 코드의 스타일을 분석해서 적용하는 것도 좋은 공부가 될 것 같습니다.