템하마켓 템플릿하우스 사용 가이드

Temhamarket Source Code Guide v1.0 |
ⓒTemhamarket

템플릿하우스
프로젝트 접속방법

  1. 🔗 https://temha.io/ (템플릿하우스)를 접속 후, 우측 “프로젝트 시작” 버튼을 클릭 해 가입한 계정으로 로그인해 주세요.

  2. [ 작업공간 > 내 프로젝트 > 선택할 프로젝트명 ] 순서에 맞게 클릭해주세요.

  3. 프로젝트에 접속 시 노출되는 화면은 아래와 같습니다.
    이제 그누보드와 연결된 템플릿하우스 에디터를 통해 자유롭게 수정하면 됩니다.

에디터 작업 환경 가이드

  1. 에디터 주요 기능에 대한 설명은 아래와 같으며, 자세한 기능별 사용 방법은 ‘템플릿하우스 매뉴얼’을 참고해주세요.

이미지 · 텍스트 수정 방법

  • 아래의 수정 방법은 코드 패널을 직접 수정하지 않는 간편하고 쉬운 방식입니다.
  • 코드를 다룰 수 있는 분들은 코드 패널에서 직접 편집하는 것도 가능합니다.
  • 이미지, 텍스트에 대한 수정 방법은 ‘템플릿하우스 매뉴얼 > ⑤ 이미지, 배경이미지’ 에서도 확인이 가능합니다.

  1. 수정을 원하는 페이지로 이동해주세요. ①번과 ②번 모두 클릭하면 템플릿에 포함된 각 페이지를 확인할 수 있습니다.

  2. 텍스트를 수정하려면 수정하고자 하는 텍스트 영역을 클릭하면
    ①파란 테두리가 표시되며, 해당 테두리 안에서 직접 텍스트를 수정하거나
    ②오른쪽 제어판의 ‘텍스트’ 영역에서 자유롭게 편집할 수 있습니다.

  3. 이미지를 수정하려면 해당 블록 또는 이미지 영역을 클릭하세요. 클릭 시 파란 테두리가 표시되며,
    오른쪽 제어판의 ‘이미지’ 영역에서 이미지를 편집할 수 있습니다.

    ①번 ‘이미지 편집’ 버튼을 클릭하면 PC용과 모바일용 이미지를 모두 변경할 수 있는 팝업이 열리고,
    ②번 이미지를 직접 클릭해도 동일하게 PC와 모바일 이미지를 모두 변경할 수 있습니다.

    ※ 단, 수정하려는 블록에 ‘모바일’ 이미지가 존재하지 않는 경우에는 PC용 이미지만 변경할 수 있습니다.

  4. 이미지에는 배경 이미지(예: 배너의 뒷배경)가 포함될 수 있으며, 이 경우에는 수정 방법이 다릅니다.
    좌측 메뉴에서 ‘레이아웃’을 클릭한 후, ① 배경이 포함된 블록의 옵션을 선택하세요.

    ②번 영역에서 PC용과 모바일용 배경 이미지를 자유롭게 편집할 수 있으며,
    이미지 위에 오버레이(dim 효과)를 적용하거나, 스크롤 시 이미지가 고정되어 보이도록 ‘고정 효과’를 설정하는 것도 가능합니다.

    ※ 단, 수정하려는 블록에 ‘모바일’ 이미지가 존재하지 않는 경우에는 PC용 이미지만 변경할 수 있습니다.

  5. 롤링되는 블록(스와이퍼)의 경우, 해당 블록을 클릭하면 오른쪽 ‘슬라이드 편집’ 영역을 통해 이미지와 텍스트를
    자유롭게 수정할 수 있으며, 슬라이드를 추가하거나 삭제하는 것도 가능합니다.

동영상 수정 방법

  • 동영상을 수정하는 방법은 ‘유튜브, 비메오, 직접업로드(mp4)’ 3가지의 방법으로 나누어 집니다.
  • 동영상에 대한 수정 방법은 ‘템플릿하우스 매뉴얼 > ⑥ 비디오’ 에서도 확인이 가능합니다.

  1. 비디오를 수정하는 방법유튜브

    • 유튜브 메인 페이지에 접속한 후, 원하는 동영상의 화면으로 이동하세요.
    • 동영상 상단의 URL을 그대로 복사합니다. (Ctrl + C)
    • ① 수정하려는 동영상 블록을 클릭한 다음,
    • ② 오른쪽 제어판 패널의 ‘비디오 URL’ 항목에 복사한 링크를 붙여넣어 주세요. (Ctrl + V)

  2. 비디오를 수정하는 방법비메오

    • 비메오 메인 페이지로 접속 후, 회원가입or로그인을 해주세요.
    • ①과 같이 사용할 동영상을 비메오에 업로드 합니다.
    • ① 라이브러리 탭으로 이동 후 → 원하는 비디오의 링크를 아래와 같이 복사합니다.
    • 템하의 에디터를 넘어와서
    • ① 수정하려는 동영상 블록을 클릭한 다음,
    • ② 오른쪽 제어판 패널의 ‘비디오 URL’ 항목에 복사한 링크를 붙여넣어 주세요. (Ctrl + V)

  3. 비디오를 수정하는 방법직접 업로드

    • ① 수정하려는 동영상 블록을 클릭한 다음,
    • ② 오른쪽 제어판 패널의 ‘비디오’ 영역에 ‘Upload’ 버튼을 클릭해 주세요.
    • 비디오 선택 팝업이 나타나면,
    • ① ‘동영상 업로드’ 버튼을 클릭하여 사용할 동영상을 업로드합니다.
    • ② 업로드된 동영상을 클릭한 후,
    • ③ ‘교체’ 버튼을 눌러 기존 동영상을 변경해 주세요.

  4. 동영상이 배경으로 사용된 경우, 수정 방법이 다릅니다.
    좌측 메뉴에서 ‘레이아웃’을 클릭한 후, ① 배경 동영상이 포함된 블록의 옵션을 선택합니다.

    ② ‘백그라운드’ 영역에서 ‘URL(유튜브, 비메오 등)’ 또는 ‘Upload(내 파일 업로드)’ 중
    원하는 방식을 선택해 동영상을 교체할 수 있으며, 동영상 위에 오버레이(dim 효과)를 설정하는 것도 가능합니다.

FTP 서버 내보내기(파일 동기화)

  • 템하의 내보내기 기능은 별도의 설치 없이 바로 업로드가 가능하여 편리하게 이용할 수 있습니다.
  • ‘내보내기’에 대한 자세한 내용은 ‘템플릿하우스 매뉴얼 > 내보내기’ 에서도 확인이 가능합니다.

  1. FTP 내보내기(파일 동기화)란?

    • 템하의 에디터를 통해 텍스트, 이미지, 또는 코드를 수정하고, 수정한 내용을 그대로 서버에 동일하게 반영하는 기능을 ‘FTP 내보내기(파일 동기화)’ 라고 합니다.
    • FTP 내보내기(파일동기화)의 사용 방법과 설명은 아래와 같으며, 템하의 호스팅을 이용하는 게 아닌 직접 구매한 호스팅을 통해 이용을 원할 경우 ④ 템하 IP 이용 시 주의사항 을 꼭 확인해주세요.

  2. 내보내기의 위치와 FTP업로드

    • 내보내기 버튼은 우측 상단에 위치해 있으며, 클릭 후 ‘FTP 업로드’를 선택하면 아래와 같은 팝업이 나타납니다.

  3. FTP 업로드 방법

    • ① FTP 또는 SFTP 를 확인하시어 내 호스팅에 맞게 선택해주세요.
    • ② 내 호스팅의 Host와 Port번호를 입력해주세요.
    • ③ 내 호스팅의 id와 password를 입력해주세요
    • ④ 내 호스팅에 저장될 프로젝트 위치를 입력해주세요.

    단, root(최상위 폴더)에 www폴더가 있는 경우 폴더명에 www를 포함시켜야 합니다. (예: /www/프로젝트를저장할폴더)

  4. 템하 IP 이용 시 주의사항 (예 : 직접 구매한 호스팅을 사용 시)

    • IP 허용 후 접속이 가능하도록 설정된 경우, 템하의 IP : 132.226.231.1 를 허용해 주셔야 접속이 가능합니다.
    • 대표적인 예시로 카페24, 닷홈, 가비아에 대한 설명으로, 정확한 설정 방법은 각 호스팅 페이지의 매뉴얼을 참고해 주세요.
    A
    • 관리자 페이지 접속쇼핑몰 관리자 페이지에서 사이트 환경 설정 > 상점/보안 설정으로 이동합니다.
    • IP 접속 제한 설정허용하려는 IP를 입력하여 해당 IP만 접근할 수 있도록 설정합니다. 예: 123.123.123.1 또는 대역 설정
      (123.123.123.*)이 가능합니다.
    • 적용설정 후 저장하면 해당 IP 외에는 접속이 차단됩니다.
    A
    • 닷홈 웹호스팅 관리 페이지 접속웹호스팅 관리 메뉴에서 보안 설정 섹션으로 이동합니다.
    • IP 허용 및 차단 설정방화벽 설정을 통해 특정 IP를 허용하거나 차단할 수 있습니다.
    A
    • 호스팅 제어판 접속가비아 호스팅 제어판에서 웹 방화벽 설정 메뉴로 이동합니다.
    • 허용 IP 추가허용할 IP 주소를 입력하고 설정을 저장합니다.

블록 수정 시 주의사항

  1. 공통영역

    A

    홈페이지의 모든 화면에서 반복해서 나오는 부분들을 말합니다.
    예를 들면, 위쪽에 있는 메뉴(헤더), 아래쪽에 있는 회사 정보(푸터), 게시판 위쪽에 들어가는 서브비주얼 이미지 등이 여기에 포함됩니다. 이 부분을 한 번 수정하면, 홈페이지의 모든 화면에 똑같이 반영됩니다.

    A

    네, 헤더나 푸터를 수정한 뒤 파일을 업로드(FTP 내보내기)하면 홈페이지에 바로 반영됩니다.
    ‘내보내기’에 대한 자세한 내용은 ‘템플릿하우스 매뉴얼 > 내보내기’ 에서도 확인이 가능합니다.

    A

    게시판 비주얼에 사용되는 이미지 파일은 자유롭게 교체할 수 있습니다.
    그러나 비주얼 영역의 HTML 구조나 텍스트 내용은 공통 영역에서 수정할 수 없으며, 각 게시판 페이지에서 개별적으로 수정해야 합니다. 또, 게시판 비주얼에 적용된 CSS와 JS는 공통 영역에서 수정 가능하며, 변경 내용은 모든 게시판에 일괄 반영됩니다.

  2. 헤더와 푸터의 코드 수정

    A

    헤더나 푸터의 HTML, CSS, JS 코드를 수정할 때는 링크나 경로 설정에 특히 주의해야 합니다.
    예를 들어, 메뉴 링크를 수정하면서 실제 서버에 존재하지 않는 경로를 입력하면,
    사용자가 해당 메뉴를 클릭했을 때 '404 오류(페이지를 찾을 수 없음)'가 발생할 수 있습니다.

    특히 게시판 페이지는 기본적으로 /bbs/ 라는 경로를 사용합니다.
    이 경로를 실수로 삭제하거나 잘못 수정하면 게시판에 접근할 수 없게 됩니다.
    따라서 헤더나 푸터의 링크를 수정할 때는, 서버에 실제로 존재하는 페이지 경로를 꼭 확인한 뒤, 코드에 정확히 반영해야 합니다.

  3. ‘게시판’과 같은 편집 불가 블록 코드 수정 시 주의사항

    A

    위 이미지와 같이 게시판 블록과 문의 블록은 서버에서 PHP 코드로 HTML 구조 자동 생성과 데이터 처리를 담당하기 때문에,
    사용자가 에디터 상에서 직접 수정하거나 삭제할 수 없습니다.

    단, 위 이미지와 같이 블록 내에서 <!--notice-latest--> 같은 특정 주석 영역을 제외한 부분 예: 이미지, 제목 등)은 자유롭게
    수정이 가능하며, <article class="board_blank"> 요소는 에디터에서 실수로 삭제되는 것을 방지하기 위한 장치입니다.
    만약 서버 코드(preg_replace 등)를 수정해 이 요소를 제거하면, 숨겨진 레이아웃이 그대로 노출될 수 있으니 주의가 필요합니다.

  4. CSS, JS 및 주석 수정 시 주의사항

    A

    게시판 블록과 문의 블록도 다른 블록들과 마찬가지로 CSS와 JS는 자유롭게 수정할 수 있습니다.
    이 블록들은 HTML 구조가 PHP로 동적으로 삽입되지만, 스타일(CSS)과 스크립트(JS)는 각 블록 전용 파일을 사용합니다.

    ※ 주의: CSS나 JS를 잘못 수정하면, 게시판이나 문의 블록의 레이아웃이 깨질 수 있으니 수정 시 주의가 필요합니다.

    A

    게시판 블록이나 문의 블록을 삭제하면, 해당 블록과 연동된 CSS 및 JS 파일도 함께 삭제됩니다.
    이로 인해 해당 영역의 레이아웃이 무너지거나 콘텐츠가 표시되지 않을 수 있습니다.
    이 블록들은 <!--notice-latest--> 주석 마커를 기준으로 서버에서 콘텐츠가 삽입되기 때문에,
    주석이 제거되면 콘텐츠도 함께 사라집니다.

    A

    블록을 삭제하거나 해당 주석이 제거되면, 해당 영역에 콘텐츠가 삽입되지 않으므로 주석은 삭제하시면 안됩니다.
    예를 들어, 서버에서는 <!--notice-latest--> 과 같이 주석 마커를 기준으로 콘텐츠가 삽입되기 때문에, 해당 주석의 글자를 변경하면
    서버는 기존 주석을 찾을 수 없어 콘텐츠를 출력하지 못하게 됩니다. 따라서 주석을 수정하거나 변경해야 할 경우,
    서버 코드의 주석 기준도 함께 동일하게 변경해주셔야 정상적으로 출력됩니다.