2026, 새로운 도약을 시작합니다.

AI로 컴포넌트 제작하기 (CSS 잘 못하시면 유용함) [kiss]

오늘 소개할 곳은 웹크럼브입니다.

Webcrumbs

노코드 컴포넌트 프론트엔드 서비스

컴포넌트(Component)란게 프로그래밍에서 재사용이 가능한 각각의 독립된 모듈이니까 어디다 써먹는지는 잘 아실것이고... 암튼...

보통 AI 사용하듯이 필요한 것 입력하고 Generate를 클릭하면 됩니다. 

   한글 지원합니다.


예제로, "가로로 긴 명함 형태의 포토 프로필이 필요해. 중간에 사진이 있고, 바로 아래에는 굵은 글자로 "SIR"이라고 적혀 있으며, 그 아래에는 "그누보드 제작"이라는 설명을 넣어줘."라고 입력해 봤습니다. 

3034974767_1724692636.1189.png

위쪽의 Export Code를 누르면 여러 코드 소스를 볼 수 있는데요,

3034974767_1724692696.3011.png

브라우저 맨 아래 하단에서 Code를 눌러도 이런 거 나옵니다.

3034974767_1724692732.8647.png

아참! 메인 왼쪽에 보면 Images라고 보이죠?

거기다가 원하는 이미지를 넣고 이런 식으로 해줘 하고 요청해도 뚝딱 만들어 줍니다.

포토샵으로 작업한 후, 그 이미지를 코드로 바꿀 때 유용하겠습니다.

소스 코드들은 웹상에서는 수정하지 못하지만,

복사해 올 수 있으니 복사해서 저장하고 파일로 관리하면 필요할 때마다 변경해가며 써먹을 수 있을 것입니다. 그러니까 컴포넌트지요. ^^;

적어도 이젠 컴포넌트 부분에서는 CSS 잘 못해도 되겠네요. ㅎ

도움이 될까 모르겠습니다만....

|

댓글 2개

멋져버러요~~

이런 사이트 더 모아 놓은거 없나요? 위 소개 사이트는 다 좋은데 너무 똑같은 레이아웃만 있네요. CodePen 을 학습한 후 다양한 레이아웃을 보여주면 더 좋을 텐데. 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

자유게시판

번호 제목 글쓴이 날짜 조회
공지 1주 전 조회 460
200420 어제 조회 41
200419 2일 전 조회 89
200418 3일 전 조회 64
200417 4일 전 조회 107
200416 5일 전 조회 83
200415 6일 전 조회 133
200414 6일 전 조회 157
200413 6일 전 조회 68
200412 6일 전 조회 168
200411 6일 전 조회 133
200410 6일 전 조회 160
200409 6일 전 조회 91
200408 1주 전 조회 97
200407 1주 전 조회 194
200406 1주 전 조회 116
200405 1주 전 조회 233
200404 1주 전 조회 183
200403 1주 전 조회 291
200402 1주 전 조회 202
200401 1주 전 조회 152
200400 1주 전 조회 222
200399 1주 전 조회 162
200398 1주 전 조회 238
200397 1주 전 조회 126
200396 1주 전 조회 129
200395 1주 전 조회 105
200394 1주 전 조회 90
200393 1주 전 조회 126
200392 1주 전 조회 267
200391 1주 전 조회 188
🐛 버그신고