웹사이트 톤앤매너 정하기 page.tsx

 

Nody에 어울리는 컬러 팔레트를 정했다.

장표 제작할 때는 로고나 웹사이트 활용해서 어도비 컬러 팔레트로 뽑는 편인데, 서비스에 적용할 컬러는 조금 어려웠다. 요즘 AI로 컬러 팔레트 뽑아주는 서비스가 많아서 여러 사이트를 둘러봤다.

그 중 가장 편리했던 곳음 BairedDev 라는 서비스. 키컬러 조합을 정하고 실제 대시보드에 적용해서 완성된 화면을 보면서 고를 수 있다. 다만 트렌디한 컬러 조합이 썩 많지는 않았고, AI generator도 쏘쏘였다. 팬톤 올해의 컬러를 기준으로 제미나이에 컬러 칩을 추천받았고, 그걸 다시 BairesDev에 넣어 조화를 확인하는 방식으로 사용했다. 

 

AI Colors | BairesDev

 

🚀 Antigravity(Gemini 3.1 Pro)에게 내릴 최종 디자인 명령
이미지에서 확인된 Gemini 3.1 Pro (High) 모델을 선택하고 아래와 같이 명령해 보세요.

Nody의 메인 UI 테마를 확정했어. 첨부한 가이드를 바탕으로 src/app/page.tsx를 업데이트해줘.
전체 배경은 #FFFFFF로, 카드 섹션들은 #F5F5F5를 사용해 구분해줘.
포인트 컬러는 #B0E0E6와 #87CEEB를 적절히 섞어서 차분하고 시원한 느낌을 줘.
텍스트는 #000000을 기본으로 하되, 보조 정보는 #2C2C2C를 사용해줘.
모든 컴포넌트의 모서리는 부드럽게(rounded-xl 이상) 처리하고, 그림자는 아주 옅게 설정해서 모던한 대시보드 느낌을 살려줘.

 

 

 

안티그라비티만으로 진행할 때는 로컬에서 열어보는 법을 알아내는 것도 힘들었을 것 같다는 생각이 들었다. 마치 Gemini는 기획자, Antigravity는 개발자로 부리는 것 같다.

 

 

로컬에서 열어 본 Nody 프론트 페이지! 데이터는 더미데이터라 아직 다듬어야 할 것이 많지만, 일단 얼개는 그렸다. 매우 뿌듯.