개인 프로젝트/03. Coding 6

[Interactive Web] Ep.06 Advent Calendar 제작 완료

[코딩 👶의 Advent Calendar Interactive Web 제작 도전기]아래 링크를 클릭하면 과정을 확인할 수 있어요! 피드백 환영입니다🪻🪻2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.01 Advent Calendar 기획2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사2024.11.24 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.03 Advent Calendar 디자인2024.11.25 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.04 Advent Cale..

[Interactive Web] Ep.05 Advent Calendar 코드 구성

[코딩 👶의 Advent Calendar Interactive Web 제작 도전기]아래 링크를 클릭하면 과정을 확인할 수 있어요! 피드백 환영입니다🪻🪻2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.01 Advent Calendar 기획2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사2024.11.24 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.03 Advent Calendar 디자인2024.11.25 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.04 Advent Cale..

[Interactive Web] Ep.04 Advent Calendar Design (컴포넌트화)

[코딩 👶의 Advent Calendar Interactive Web 제작 도전기]아래 링크를 클릭하면 과정을 확인할 수 있어요! 피드백 환영입니다🪻🪻2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.01 Advent Calendar 기획2024.11.23 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사2024.11.24 - [개인 프로젝트/03. Coding] - [Interactive Web] Ep.03 Advent Calendar 디자인   지난번 게시글에서 일러스트를 완성했고 대략 코드 구성을 짰다. 위 2번째 이미지처럼 위치랑 창문, 문 클릭했을 때 모달팝업..

[Interactive Web] Ep.03 Advent Calendar 디자인

[참고]좋은 프로토타입 예시를 찾았다. 코드로 만들어보고 피그마 프로토타입 연습도 해봐야겠다. 일러스트를 정했다! 내가 그리기엔 디자인에 에너지를 100% 다 쓸 것 같아서 ⛓️‍💥😓마음에 드는 일러스트를 열심히 찾았고, 정해서 크리스마스 색깔을 입혔다!  (1) 건물 일러스트💬해당 파일은 CC BY 4.0 (Creative Commons Attribution 4.0 International) 라이선스였다. 이는 상업적 사용을 포함한 거의 모든 용도를 허용하는 것이지만 혹시 몰라 원작자에게 일러스트 사용 허락을 구하는 메일을 보냈다. 그리고 허락 받았다 🩶 우선 메일 답장을 기다리면서 배경 작업을 시작했다.모바일 사용자가 많을 것 같아 모바일과 데스크탑을 모두 고려하고 싶지만, 일러스트 이미지를 ..

[Interactive Web] Ep.02 Advent Calendar 레퍼런스 조사

[이미지] 🩷 더 추가 예정 [링크] 🩷 더 추가 예정1. 아트 & 디자인 관련 사이트 • Soloretta - Art and Design예술 작품 및 디자인 관련 프로젝트. • VMA Museum - Art and Architecture건축 및 미술 작품을 다루는 러시아 기반의 아트 뮤지엄. • Freepik - Retro Building Design벡터 기반의 복고풍 건축 디자인 리소스. • Clip Studio Asset - Retro Illustration건축 관련 클립 스튜디오 일러스트 에셋. • Clip Studio Asset - Building Illustration건물 삽화 리소스. 2. 건축 프로젝트 및 포트폴리오 • Ward Jewell Architect - Portfolio건축 포..

[Interactive Web] Ep.01 Advent Calendar 기획

어드벤트 캘린더 디자인 1차 초안 1. 컨셉 • 크리스마스 마을 테마의 단일 건물: • 한 건물에 창문 25개를 배치하여 어드벤트 캘린더 구현. • 각 창문은 독특한 SVG 디자인으로 제작. • 사용자가 날짜별 창문을 클릭하면 문이 열리는 애니메이션과 함께 모달 팝업으로 콘텐츠를 표시. 2. 주요 디자인 요소 1. 건물: • 크리스마스 분위기를 강조한 따뜻한 톤의 건물 외관. • 벽돌 질감 또는 아트 스타일로 제작. 2. 창문 (SVG): • 각 창문은 서로 다른 모양과 크기(원, 사각형, 다각형 등)로 구성. • 창문 내부에 날짜를 표시하며, 숫자는 중앙에 배치. • 창문이 문처럼 열리도록 애니메이션 추가. 3. 컬러 팔레트: • 기본 톤: 빨강(#D32F2F), 초록(#388E3C), 금색(#FFD7..

728x90