NGMsoftware

NGMsoftware
로그인 회원가입
  • 커뮤니티
  • 자유 게시판
  • 커뮤니티

    자유롭게 글을 작성할 수 있는 게시판입니다.

    자유 게시판

    자유롭게 글을 작성할 수 있는 게시판입니다.


    고민상담 매크로 관련 질문은 아니지만 질문 드립니다! (웹사이트 제작 관련)

    페이지 정보

    본문

    현재 제작중인 웹사이트가 주택을 주문제작하는 사이트 입니다.


    자동차 인디오더 하는것처럼 주택도 인디오더를 하는 방식을 구현하고 싶은데요.


    각각의 옵션을 선택 했을때 프리뷰를 보여지게 하는 기능을 어떻게 구현해야 할지 모르겠습니다..


    옵션이 한가지가 아니고 여러가지여서 교차선택?을 했을때 그에 맞는 이미지가 나오게 하는 기능만 구현되면


    어렵지 않은 것일텐데 프로그래밍이나 HTML에 지식이 없는 일반인이라서 조금은 어렵네요..


    워드프레스로 제작 중 이구요. 도움이 되실까봐 벤치마킹 중인 사이트 링크도 올려드리겠습니다


    감사합니다.


    현재 제작 중인 사이트: tomscavin.com

    벤치마킹 중인 사이트(테슬라): https://www.tesla.com/ko_kr/model3/design#paint

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천0 비추천0

    댓글목록

    profile_image

    엔지엠소프트웨어님의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    안녕하세요. 저도 집을 구매하려고 알아볼 예정인데...
    도움 받을 수 있는일이 있을지도 모르겠네요^^;
    테슬라 홈피를 봤는데요. 옵션을 선택하면 오버랩되서 덧씌워지는 방식을 말씀하시는건가요??

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    테슬라 홈페이지를 대충 보니 옵션을 선택함에 따라서
    Red컬러_A휠.jpg 이런식으로 거기에 맞는 전체 이미지가 있는거 같더라구요.
    옵션을 교차선택해서 해당 이미지가 나오는 법만 알면 구현 방법이 되게 쉬울거 같아요 ㅠㅠ
    대부분 1개의 옵션을 선택하고 프리뷰 이미지가 바뀌는건 많은데
    2개이상의 옵션을 선택해서 프리뷰 이미지가 바뀌는건 많지 않더라구요..ㅠㅠ

    profile_image

    엔지엠소프트웨어님의 댓글의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    이미지를 각각 전부 만들어야 합니다. 그리고, div에서 스위치 해야 할거 같아요.
    이 부분은 jQuery로 가능할거구요.
    당연하지만 ajax (sync)로 구현하셔야겠죠^^;
    아래처럼 이미지가 각각 서버에 존재해야 합니다.

    https://static-assets.tesla.com/configurator/compositor?&options=$W38B,$PPMR,$DV2W,$MT308,$IN3B2&view=STUD_3QTR&model=m3&size=1441&bkba_opt=1&version=v0027d202003051352&version=v0027d202003051352

    https://static-assets.tesla.com/configurator/compositor?&options=$W39B,$PMNG,$DV2W,$MT308,$IN3B2&view=STUD_3QTR&model=m3&size=1441&bkba_opt=1&version=v0027d202003051352&version=v0027d202003051352

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    이미지는 각각 모두 있습니다!
    이미지는 아마 서버로 자동으로 들어갈거 같아요. 워드프레스를 사용중이라서..
    근데 jQuery를 기초부터 배워야 하는 상황이라서 용어를 잘 모르겠습니다.
    ajax라는 것이 어떤 걸까요..? div라는건 HTML중에 <div>로 들어가는거라고 조금 알고 있습니다..

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    ajax(sync)에 대해서 찾아보니
    데이터를 미리 불러와서 불필요한 로딩을 줄여주는 것인것 같네요 ㅎㅎ
    이 기능이 옵션 썸네일을 눌렀을때 프리뷰를 로딩없이 바로 가져와주는 역할을 하게 하는거겠죠?

    profile_image

    엔지엠소프트웨어님의 댓글의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    ajax는 비동기 통신하는거예요^^;
    예를 들어서 전체 화면이 있잖아요? 여기서 자동차 영역만 새로고침하고 싶은 경우에 ajax를 사용합니다.
    네이버나 위 참고 사이트처럼 전체 사이트에서 일부분만 새로 고쳐야 하는 경우에 사용되는 기술이에요.
    div 안에 img를 넣는데요. 요소(element)의 이미지를 교체할 수 있어요.
    물론, 스텍이나 블록, 절대, 상대등등... 많은 속성들이 있어서 디자인 구성에 영향을 주지 않도록 사용하셔야 합니다.
    핵심은~ 에이작스(아작스)를 이용해서 이미지 부분만 서버로부터 받아와서 jQuery로 div노드 아래 이미지를 교체해야 한다는 것입니다.

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    테슬라 사이트처럼 사이드에 탭메뉴를 표시하고 옵션버튼을 넣는 방법은 뭐가 있을까요 ??

    profile_image

    엔지엠소프트웨어님의 댓글의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    크롬 사용하시죠? 테슬라 사이트에서 F12를 눌러보세요~
    그리고, Ctrl+Shift+C를 누르면 NGM의 창찾기 처럼 사이트의 구조를 볼 수 있어요^^;
    제가 잠깐 보니 크게 div로 구역을 나눠서 내부 코딩을 해놨더라구요.
    이런식으로 구성하는게 일반적이긴 합니다^^

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    소심비형님은 어떤걸로 홈페이지를 만드셨나요??
    카페에서 보니 Xexpress?나 그누보드를 사용하실것처럼 보였는데..

    profile_image

    엔지엠소프트웨어님의 댓글의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    전 그누보드예요^^;

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    짧지 않은 시간인데 시간내서 답변주셔서 감사합니다!
    큰 도움이 된것 같습니다. 말씀해주신 내용을 바탕으로 공부한 후에 제작해보도록 하겠습니다ㅎㅎ
    집을 구매하실 예정이라고 하셔서 저도 도움을 드릴 수 있다면 도움을 드리고 싶습니다.
    저는 완전한 건축주택이 아니라 이동식주택을 제작하구요!
    원하신다면 인스타그램에서 사진 보시고 궁금하신게 있으시면 물어봐주세요!
    인스타그램: toms_cavin

    profile_image

    엔지엠소프트웨어님의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    넵... 집이 고민이긴한데... 어느정도 안정이 되면 알아보도록 하겠습니다^^
    감사합니다~

    profile_image

    스티브잡수님의 댓글의 댓글

    no_profile 스티브잡수 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    그런데 댓글이 10개가 넘어가니 마지막 댓글에서 답글 다는게 불가능 하네요.
    그래서 저는 마지막 댓글 말고 그 전 소심비형님 댓글 누르고 댓글 달았어요.

    profile_image

    엔지엠소프트웨어님의 댓글의 댓글

    엔지엠소프트웨어 쪽지보내기 메일보내기 홈페이지 자기소개 아이디로 검색 전체게시물 작성일 Date

    우측 끝으로 가면 글을 달수가 없거든요~
    디테일이 살아있죠..ㅎㅎ;

    profile_image

    쿵돌이님의 댓글

    no_profile 쿵돌이 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 작성일 Date

    워드프레스는 본인이 코드 수정하려면 숏코드를 알아야되서 플러그인 avada 를 이용하시길 추천드려요 정말 다되거든요 보통