[#2 가상학교 홈페이지 만들기] 데이터 정리하고 디자인 초안 잡기(1)

지난 글 작성시점으로부터 딱 1주일이 지났네요.

체감상으로는 한 2주 된 것 같았는데 그 사이 커뮤니티를 많이 다녀가서 그런 기분이 드는 것 같습니다 ㅋㅋ

그동안 사이트 구성안 작성을 완료하고 노션에 데이터를 쌓고 드디어 오늘 클로드 디자인으로 디자인 시안을 뽑기 시작했습니다

노션에 데이터 쌓는 2/5정도 완료한 상태이고요. 코드 돌아가는 시간동안 계속해서 쌓으려고요.

원래는 혼자서 했는데 생각해보니까 코워크를 이용해볼 수 있겠다? 싶은거예요!

그래서 바로 스킬이랑 코워크를 장착했습니다.

노션 MCP를 연결해서 제가 내용을 말하면 클로드가 정리하고 알맞은 DB에 쏙쏙 넣어주는 걸로

 아 이것이 자동화의 맛...

아예 전체 과정을 자동화 해버리고 싶었는데 제가 하나씩 확인해야하는 성격인데다 변수가 많아서 일단 이 정도로 만족하며 쓰고 있습니다!

항목을 알아서 딱딱 채워주는 이 똑똑한 녀석..

그 다음은 디자인 잡기입니다.

사실 전에 커서로 만들어둔 와이어프레임이 있는데 그건 폐기하고 다시 만들었어요.

노션 기획안 + 애니메이션 설명 + 래퍼런스 주면서  디자인 md 작성해달라고했어요.

바로 클로드 디자인 뽑는 것보다 이렇게 문서로 만들어두면 일관된 디자인을 뽑지 않을까 싶어서요.

영역별 폰트 크기, 레이아웃 등등 알아서 잘 정해주더라고요.

그래도 레이아웃에 큰 형태는 제가 미리 정해두긴했어요. 

이 페이지는 풀와이드 스크린으로 사진이 흐르는 형태,,

이 페이지는 플립 카드 형태로 앞은 사진 뒤는 글자, 헤더는 드롭다운 형태로 호버 시 강조 색상 변경 이런 식으로 다 적었어요.

적는데 오래걸려서 요즘 ai 사용 트렌드는 이렇게 말을 많이 하는 게 아닌데..싶긴 했는데 나중에 초안 나온거보고

또 하나씩 수정하려면 한 세월이고 적당히 예쁜 디자인말고 제가 원하는 느낌으로 딱 뽑고 싶어서 이번엔 이런 식으로 작업 중입니다.

클로드한테 래퍼러스만 이만큼 먹였어요,, 이게 도움이 됐을지는 잘 모르지만..

래퍼런스도 섹션별로 원하는 느낌 찾느라 시간 많이 잡아먹었네요 ㅜㅜ

와이어 프레임 뽑을 땐 사진 영역을 placeholder로 두라고 하니까 이런 형태로 주더라고요.

바로 갤러리에서 첨부해서 느낌이 어떤지 확인할 수 있어서 좋은 것 같아요

아직 세부적인 디자인을 공개하기는 힘들지만

디자인 시스템 뽑아달라고 하니

공통 요소(헤더, 푸터), 버튼, 폼, 모달, 여백, 색상, 그라데이션 등 각 컴포넌트별로 미리 다 볼 수 있어서 확실히 일관되면서 원하는 방향으로 디자인 뽑는 게 전보다 수월해진 것 같습니다!

디자인시스템을 만드는 곳에는 폴더 전체 첨부가 안되어서 거기는 md만 첨부해서 만들고

따로 채팅방에는 md+노션+래퍼런스 사진 이렇게 넣고 디자인시스템 만들어달라고 프롬포트로 명령했는데

둘 중에 누가 더 마음에 들게 나올지 지켜봐야겠어요.

지금 돌리다가 토큰 나가서 대기 중입니다 ㅋㅋㅋ