부동산 웹사이트 Shopify 2.0

사용된 기술

• Shopify 액체:속성 목록 및 세부 정보의 동적 렌더링과 검색 쿼리 처리에 활용됩니다.

• 테일윈드 CSS: 스타일링 및 반응형 디자인에 사용되어 웹 사이트가 모든 장치에서 멋지게 보이도록 합니다.

• 자바스크립트/jQuery: 속성 필터링, 문의 양식 유효성 검사, 지도 통합 및 사용자 경험 향상과 같은 대화형 요소에 사용됩니다.

프로젝트 목표

• Tailwind CSS와 같은 프런트엔드 기술의 숙련도를 보여주어 시각적으로 매력적이고 반응이 빠른 부동산 웹사이트를 만드세요.

• 동적 속성 데이터 및 검색 기능을 처리하기 위한 Shopify Liquid의 기능에 대한 이해를 보여줍니다.

• JavaScript 및 jQuery 기술을 강조하여 사용자 참여를 향상하고 유용한 기능을 제공하는 대화형 기능을 만듭니다.

• 부동산 검색, 조회 및 상호 작용을 위한 사용자 친화적인 경험을 제공하는 포괄적인 부동산 플랫폼을 설계하고 개발하는 능력을 강조하십시오.

​

​이러한 기술을 효과적으로 결합함으로써 이 포트폴리오 프로젝트는 부동산 업계의 특정 요구 사항을 충족하면서 프런트엔드 및 백엔드 개발 기술을 모두 보여주는 기능적이고 시각적으로 매력적인 부동산 웹 사이트를 만드는 능력을 보여줍니다.

프로젝트 기능

1. 홈페이지: 홈페이지에는 멋진 부동산 이미지가 포함된 영웅 섹션, 부동산 유형 및 위치 필터링을 위한 검색 표시줄, 사용자가 목록을 탐색하도록 유도하는 클릭 유도문안이 있습니다. Tailwind CSS는 홈페이지 요소를 구성하고 스타일을 지정하는 데 사용됩니다.

2. 부동산 목록: 사용자는 다양한 부동산 목록을 탐색할 수 있습니다. Shopify Liquid를 사용하여 목록을 가져와 표시하고 Tailwind CSS를 사용하여 UI 스타일을 지정합니다. 각 목록에는 이미지, 속성 세부 정보 및 "세부 정보 보기" 버튼이 포함됩니다.

3. 속성 세부 정보: "상세 정보 보기" 버튼을 클릭하면 전용 부동산 세부 정보 페이지로 이동합니다. 이 페이지는 Shopify Liquid를 사용하여 속성별 정보를 검색하는 반면 Tailwind CSS는 잘 디자인되고 반응이 빠른 레이아웃을 보장합니다.

4. 검색 및 필터링: 검색 표시줄 및 필터 옵션을 통해 사용자는 속성 검색을 구체화할 수 있습니다. Shopify Liquid는 검색 쿼리를 처리하는 데 사용되며 JavaScript/jQuery는 선택한 필터를 기반으로 목록을 동적으로 업데이트하여 상호 작용을 향상시킵니다.

5. 문의 양식: 각 속성 세부 정보 페이지에는 사용자가 속성에 대해 문의할 수 있는 문의 양식이 포함되어 있습니다. 양식의 유효성 검사 및 제출은 JavaScript/jQuery를 사용하여 처리되어 사용자에게 즉각적인 피드백을 제공합니다.

6. 지도 통합:속성 목록은 JavaScript 및 가능하면 Google 지도와 같은 지도 API를 사용하여 대화형 지도에 표시됩니다. 사용자는 지도 마커를 클릭하여 부동산 위치를 시각화하고 추가 정보에 액세스할 수 있습니다.

7. 반응형 디자인: 전체 웹사이트는 Tailwind CSS를 사용하여 반응형 디자인으로 구축되어 다양한 장치 및 화면 크기에서 원활한 사용자 경험을 보장합니다.