사이트 스타일 변경 restyling

마지막 업데이트: 2026년 11월 12일

적용 대상:
Experience Manager as a Cloud Service

작성 대상:

사용자
관리자
개발자

Experience 현대화 에이전트를 사용하여 마이그레이션 중에 디자인을 적용하거나 기존 Edge Delivery Services 프로젝트의 모양을 변경할 수 있습니다. 소스 사이트의 모양을 충실히 복사하고 의도적으로 새 디자인으로 바꾸는 것은 서로 다른 요청입니다. 원하는 대로 표현하십시오.

외관은 프로젝트의 코드에 있습니다. 전역 CSS는 기본 컨텐츠의 모양을 설정하며 각 블록에는 고유한 CSS와 JavaScript이 있습니다. 이를 함께 사용하면 JavaScript에서 브라우저에서 마크업을 다시 작성할 수 있으므로 모든 디자인을 재구성하지 않고 동일한 의미 체계 콘텐츠를 제공할 수 있습니다. 사이트 빌드 및 업데이트 방법을 참조하세요. 따라서 완전히 시각적인 리스타일은 Git의 코드를 변경하고 작성된 콘텐츠만 유지합니다.

이 안내서는 리스타일을 주도하는 사람을 위한 것입니다. 개발자가 검토하는 개별 시각적 변경 작업을 수행하는 디자이너의 경우 시각적 변경 작업부터 시작하십시오.

변경 내용 및 유지 내용 동의 prepare

프로젝트을(를) 연결하고 수정할 수 있는 권한을 확인하십시오. 기준선 코드 수정 버전을 저장하고 영향을 받는 콘텐츠를 변경 전에 유지합니다.

제공:

콘텐츠 원본: 텍스트, 이미지, 링크, 메타데이터 및 의미를 유지하거나 새 콘텐츠를 승인해야 하는 기존 페이지입니다.
디자인 참조: 특정 Figma 구성 요소 또는 프레임, 승인된 참조 웹 사이트, 스크린샷 또는 디자인 사양입니다. 버전 이름과 관련된 데스크탑 및 모바일 상태를 지정합니다.
범위: 전역 토큰(색상, 타이포그래피 및 간격에 대한 CSS 사용자 지정 속성)과 기본 콘텐츠, 선택한 블록, 페이지 또는 전체 사이트.
변경하지 말아야 할 사항: 콘텐츠, URL, 작성 모델, 접근성 동작 및 통합.
출력: 작성자가 편집할 수 있는 콘텐츠, 프로젝트에서 사용하는 저장 옵션에서 또는 필요한 경우 정적 디자인 프로토타입만 편집할 수 있습니다.

스크린샷 및 참조 사이트는 상호 작용 및 반응형 규칙을 지정하지 않을 수 있습니다. 전체 사이트에 적용하기 전에 하나의 샘플 페이지에 있는 항목을 해결하십시오.

참조, 프로토타입 및 게재 design-output

에이전트는 소스 사이트, Figma 및 제공된 참조의 디자인 작업을 지원합니다. 그림 가져오기 및 안내식 재디자인은 요청에 필요할 때 프로젝트에 사용할 수 있도록 제공하는 선택적 기능입니다. 입력 및 출력이 다릅니다. 동일한 방식으로 작동한다고 가정하지 마십시오.

하나의 Figma 블록에 대해 해당 구성 요소 또는 노드 링크를 제공합니다. 새 페이지의 경우 전체 파일이 아닌 특정 프레임을 제공하십시오.
Figma 가져오기에는 Figma 액세스 토큰과 파일을 읽을 수 있는 권한이 필요합니다. 그림 디자인에서 작업을 참조하세요.
정적 HTML 디자인 미리 보기는 페이지 사본에 새 디자인을 표시하므로 방향을 선택하는 데 도움이 됩니다. 작성자는 해당 사본을 편집할 수 없으며 사이트의 문서 또는 Experience Manager 페이지가 아닙니다.
작성자가 결과를 편집해야 하는 경우 프로젝트에서 사용하는 저장소 옵션에 사이트 콘텐츠 및 블록 모델을 요청한 다음 문서 기반 콘텐츠 또는 Experience Manager 작성에 대해 설명한 대로 확인하십시오.

안내식 재디자인 guided-redesign

안내식 재디자인은 사이트 또는 페이지 세트를 단계별로 새 디자인으로 가져옵니다. Stardust 추가 기능 stardust@excat-extended에서 제공합니다. 에이전트는 현재 디자인을 캡처하고, 원하는 방향을 기록하고, 검토를 위해 이전 및 이후 프로토타입을 빌드한 다음, 승인된 디자인을 블록 및 콘텐츠로 변환합니다. 한 페이지나 블록의 스타일을 다시 지정하는 대신 여러 페이지에서 다시 디자인할 때 사용합니다. 에이전트는 작업 파일과 재설계 진행 상황을 저장소에 보관하므로 나중에 대화에서 계속할 수 있습니다.

이름별로 단계를 알 필요는 없습니다. 예를 들어 "홈 페이지와 제품 페이지를 더 가볍고 편집용 스타일로 다시 디자인"하는 등 원하는 결과를 설명하고 상담원이 단계를 제안합니다. 한 가지 단계를 직접 요청할 수도 있습니다.

에이전트에게 다음 작업을 요청하십시오.

받은 항목

현재 디자인 추출

사이트의 디자인 시스템, 브랜드, 색상 팔레트, 타이포그래피, 음색 및 페이지 인벤토리를 캡처합니다.

재디자인 방향 정의

당신이 선택한 방향을 기록하는 짧은 제품 및 디자인 개요. 이후 단계는 이를 따릅니다.

새 디자인의 페이지 프로토타입

검토를 위해 선택한 페이지의 전후 HTML 프로토타입 정적 미리 보기이며 편집할 수 없는 페이지입니다.

모든 페이지에 디자인 적용

새로운 디자인은 배포가 준비된 정적 HTML으로 인벤토리의 모든 페이지에 적용됩니다.

Edge Delivery Services에 프로토타입 배포

승인된 프로토타입으로부터 빌드된 블록 및 콘텐츠.

재디자인 롤아웃

새 디자인에 배포된 모든 페이지 또는 각 페이지 유형의 첫 번째 페이지만.

페이지를 프로토타입과 비교

배포된 페이지가 승인된 프로토타입과 다른 위치를 나열하는 시각적 및 구조적 비교입니다.

품질 검사 실행

사이트를 변경하지 않고 라우팅, 디자인 충실도, 접근성, 성능, SEO 및 링크를 검토합니다.

사이트 감사

Core Web Vitals을 포함한 설계, SEO 및 AI 가시성 감사

재디자인 옵션 제안

방향을 빠르게 탐색하기 위해 페이지의 세 가지 대체 디자인을 재디자인합니다.

Edge Delivery Services에서 동일한 디자인 다시 빌드

사이트가 현재 디자인으로 마이그레이션되었습니다.

다른 사이트의 디자인 적용

제공하는 다른 웹 사이트의 디자인에 배치된 사이트 콘텐츠.

동적 기능 추가

API 또는 사용자 상호 작용에 의존하는 검색, 양식 및 기타 기능입니다.

마이그레이션 사양 작성

리디렉션, 누락된 페이지 처리 및 재사용할 블록을 포함하여 마이그레이션 전에 동의하는 사양입니다.

가이드 재디자인을 켜면 각 페이지에 프론트엔드 디자인 품질 지침을 적용하는 디자인 크래프트 추가 기능도 켜집니다. 계속하기 전에 모든 단계를 검토하고 아래 설명된 대로 배포된 결과를 확인합니다.

마이그레이션 도중 스타일 변경 during-migration

기존 웹 사이트에서 콘텐츠를 가져왔지만 대상 디자인이 다른 경우 이 경로를 사용합니다.

콘텐츠가 저장된 위치를 포함하여 프로젝트 및 마이그레이션 범위 지정을 완료합니다.
타이포그래피, 색상, 간격, 기본 콘텐츠 및 재사용 가능한 블록과 같은 대상 디자인 시스템을 정의합니다. 기존 프로젝트 규칙을 적합한 위치에 재사용합니다.
Figma의 경우 액세스 설정한 다음 특정 구성 요소 노드에서 필요한 블록 또는 변형을 만드십시오. Figma에서 블록 다시 디자인 및 Figma에서 블록 만들기를 참조하십시오.
각 템플릿에 대한 샘플 페이지를 해당 블록 컬렉션으로 마이그레이션합니다. 라이브 사이트를 콘텐츠 소스로 유지하고 Figma 또는 승인된 참조를 디자인 소스로 유지합니다.
소스 웹 사이트와 콘텐츠 및 모양을 타겟 디자인과 비교합니다. 다시 디자인된 페이지를 이전 사이트의 모양과 다르게 판단하지 마십시오.
작성자가 결과를 편집할 수 있고 각 화면 너비에서 작동하는지 확인합니다. 필요한 경우 콘텐츠 매핑 또는 모델을 수정한 다음 일괄 처리로 계속하세요.

예:

https://www.example.com/products/tents을(를) 마이그레이션하는 동안 https://www.figma.com/design/AbC123/Brand-Refresh?node-id=12-345에서 승인된 디자인을 적용합니다. 라이브 페이지는 콘텐츠 소스이며, 참조는 새 모양을 정의합니다. 텍스트, 링크, 메타데이터 및 의미 있는 이미지를 유지합니다. 먼저 샘플 페이지 하나를 확인합니다. 작성자가 Experience Workspace에서 편집할 수 있는 컨텐츠를 만듭니다. 업로드, 푸시 또는 게시하지 마십시오.

예제 URL을 자신의 URL로 바꾸고 Experience Manager 작성의 경우 콘텐츠가 JCR에 저장된다고 가정합니다.

새 페이지에 원본 웹 사이트가 없는 경우 Figure에서 새 페이지 만들기를 참조하십시오. 특정 프레임이 텍스트와 에셋 및 디자인을 제공합니다. 이는 기존 웹 사이트 콘텐츠를 새 디자인에 매핑하는 것과 다릅니다.

기존 사이트 스타일 변경 existing-site

새 마이그레이션은 필요하지 않습니다.

기존 프로젝트와 의도한 분기를 연결합니다. 에이전트에게 프로젝트의 디자인 규칙, 블록 및 작성 모델을 읽도록 요청합니다.
영향을 받는 템플릿 및 변형을 다루는 기준 페이지를 식별합니다. 현재 모습과 중요한 상호 작용을 기록합니다.
변경 사항의 범위와 머물러야 하는 사항을 기술하십시오. 예:

https://www.figma.com/design/AbC123/Brand-Refresh에서 승인된 디자인을 사용하여 이 기존 프로젝트의 스타일을 변경합니다. / 및 /products에서 전역 색 및 타이포그래피와 카드 프레젠테이션을 변경합니다. 컨텐츠, URL, 모델, 분석, 키보드 동작 및 통합을 유지합니다. 토큰과 블록을 재사용합니다. 제안된 범위를 먼저 표시합니다. 콘텐츠를 다시 가져오거나 업로드, 푸시 또는 게시하지 마십시오.

예제 URL 및 경로를 고유한 URL과 경로로 바꿉니다.
변경 사항이 전역인 경우 먼저 공유 토큰 및 전역 스타일을 업데이트합니다. 필요한 경우에만 블록별 스타일을 적용합니다.
디자인을 파생하는 데 사용되는 페이지만 아니라 영향을 받는 모든 샘플 페이지를 미리 봅니다. 모바일 너비, 긴 제목, 누락된 선택적 콘텐츠 및 다양한 변형을 포함합니다. 전역 토큰 변경은 원래 예제를 벗어난 페이지에 영향을 줄 수 있으므로 그러한 페이지도 포함합니다.
설계에 구조적 또는 모델 변경이 필요한 경우, 이를 별도의 명시적인 결정으로 하십시오. 작성자 콘텐츠를 자동으로 다시 작성하는 대신 기존 콘텐츠가 새 구조로 이동하는 방법을 계획합니다.
코드 차이 및 프로젝트 검사를 검토한 다음 기존 프로젝트의 워크플로를 통해 푸시하고 전달합니다. 스타일 변경 사항은 코드입니다. 분기가 main에 병합되는 즉시 라이브 사이트에 도달하므로 분기의 미리 보기 URL에서 영향을 받는 페이지를 먼저 확인하십시오. 변경 내용 실행 방법을 참조하세요.

유효성 검사 및 복구 validate

다시 스타일은 내용이 올바른 상태로 유지되고, 승인된 디자인이 각 화면 너비에서 작동하며, 상호 작용은 사용 가능한 상태로 유지되며, 작성자는 여전히 샘플 페이지를 편집, 저장 및 다시 열 수 있을 때 수행됩니다. 대비, 포커스, 읽기 순서, 이미지 의미 및 프로젝트의 성능 요구 사항을 확인합니다. 유사성 점수는 이 점을 결정하지 않습니다.

결과가 잘못된 경우 영향을 받는 페이지나 블록을 식별하고 문제가 토큰, 공유 스타일, 블록 스타일, 구조 또는 콘텐츠 매핑인지 여부를 확인합니다. 해당 레이어를 수정하고 영향을 받는 모든 변형을 다시 확인합니다. Figma 액세스 오류의 경우 다시 시도하기 전에 노드 링크, 파일 권한, 토큰을 확인하고 프로젝트에 대해 Figma 가져오기가 설정되어 있는지 확인합니다.

프로젝트의 Git 워크플로를 통해 원치 않는 코드를 되돌립니다. 변경된 원격 콘텐츠를 별도로 복원합니다. 코드 되돌리기는 업로드를 취소하지 않습니다. 다시 스타일이 승인될 때까지 기준선을 유지합니다.

프로젝트 핸드오버를 사용하여 승인된 참조와 해당 버전, 변경된 파일, 영향을 받는 페이지, 모델 및 콘텐츠 변경, 확인 결과, 알려진 간격, 코드 및 콘텐츠 복구 방법을 전달합니다.

recommendation-more-help

experience-manager-cloud-service-help-main-toc