디자인 도구

lovable 맥북 바탕화면 포트폴리오 만들기

나매니저 2025. 6. 17. 10:53

출근하자마자 팀장님이 주말동안 만드신 웹사이트 보여주시는데 아주 때깔이 좋길래 뭐 쓰셨냐 하니..
Lovable AI라고 새로 나온 UI/UX용 AI라고 함다

주말동안 크래딧 무제한 이벤트를 했다는데, 이걸 왜 지금 알려주시는지요

 

요즘 이런 맥북 화면같은 포트폴리오가 유행이기도 하고, 이거 만들기 참 어렵기 때문에 lovable로 해보면 어떨까 싶었다

어차피 깃으로 연동해서 볼거라 로그인은 깃으로!

 

프롬프트:
make landing page for my portfolio. design as macbook main page. make dock and finders too. use the interactive motion such as dock icon change while hovering. make the exact same design as macbook main page. I want to click on and drag (also make them move freely, without any grids). click once, open folder. mouse held down and drag, move folder.

 

얼추 원하는대로 파인더를 자유롭게 움직일 수 있고, 독 위의 아이콘들이 hover 시 부드럽게 커지고 작아지는 모션을 보여준다
화면 오른쪽 위에보면 날짜와 시간도 현재 시간과 잘 맞는 것을 볼 수 있음!

 

 

 

기록 창을 보면 프롬프트의 버전도 저장이 되어서 되돌릴 수 있고

채팅창 하단에는 첨부파일, 깃으로 보내기, 슈퍼베이스로 배포하기 등의 기능이 있다

 


더 디테일하게 수정하고 싶다면 코드를 바꾸는 방법 밖에 없는데, 아쉽게도 dev 모드는 유료
파일 아이콘 tsx도 수정해야 하고 원하는 내용을 상세하게 넣으려면 어쩔 수 없이 구독해야 하나봄,,

최근 애플의 리퀴드 글래스 같은 효과가 가능할지도 궁금

 
 
 

배경화면 & 폰트 변경

San Fransico 폰트로 바꾸고, 최신 OS 26 배경화면으로 바꾸니 조금 괜찮아보이는 마법

 

폰트 굵기와 색상은 아무래도 다시 골라야할거 같지만

 

 

dev모드든 깡으로 깃에서 수정하든 vscode로 옮기든 완성하는게 이번달 목표 되겠습니다 :)