9. CSS·AI 도우미와 문제 해결
기본 편집이 익숙해진 뒤 CSS와 AI 도우미를 활용할 수 있습니다. 문제가 생겼을 때는 설정·저장·게시·실제 화면을 나누어 확인해 주세요.
1단계. CSS 적용 범위 확인하기
- 왼쪽 CSS를 클릭합니다.
- 패널 안내를 읽고 적용 범위를 확인합니다. 사이트 CSS는 같은 사이트의 여러 페이지에 영향을 줄 수 있습니다.
- 특정 요소만 바꾸려면 먼저 요소를 선택하고 선택한 요소 선택자 넣기로 해당 요소의 선택자를 넣습니다.
- 원래 CSS를 별도로 보관하고 한 번에 작은 변경만 적용합니다.
- CSS 패널의 저장 상태를 확인한 뒤 실제 게시 화면에서도 결과를 점검합니다.
처음이라면
글자 크기·색상·정렬·여백은 먼저 기본 설정에서 조절해 주세요. CSS는 다른 페이지나 기기별 표시에도 영향을 줄 수 있습니다. 화면 폭 조건을 사용하는 경우 실제 모바일에서도 확인합니다.
2단계. AI 도우미에 요청하기
- 편집할 페이지와 대상을 확인하고 필요한 경우 현재 내용을 저장합니다.
- 왼쪽 AI 도우미 또는 요소의 AI 수정을 엽니다.
- 대상·바꿀 내용·유지할 내용을 구체적으로 입력합니다. 예: 선택한 소개 문구를 두 문장으로 줄이고 버튼 문구와 링크는 유지해 주세요.
- 화면에서 안내하는 생성·제안 결과를 확인합니다. 확인·적용 단계가 있으면 내용을 검토한 뒤 적용합니다.
- 변경된 문구·이미지·링크와 모바일 화면을 확인하고 저장·게시합니다.
AI가 만든 내용도 실제 상품·서비스 정보와 맞는지 확인해야 합니다. 처리 중에는 같은 요청을 반복하지 말고 완료 또는 오류 안내를 확인합니다.
잘되지 않을 때 확인해 주세요
상황 | 확인할 순서 |
|---|---|
요소를 추가했는데 보이지 않아요 | 구조 목록에서 생성 여부와 부모 위치를 확인합니다. 다른 탭·슬라이드 안에 들어갔는지도 봅니다. 원치 않는 위치라면 실행 취소 후 추가 위치를 다시 선택합니다. |
설정을 바꿨는데 화면이 그대로예요 | 선택한 요소·현재 기기·적용 버튼 여부를 확인합니다. CSS나 부모 설정도 영향을 줄 수 있습니다. |
저장했는데 공개 화면이 그대로예요 | 게시와 배포 등록까지 했는지 확인합니다. 최신 배포 상태를 확인하고 실제 주소를 새로고침합니다. |
404 또는 페이지를 찾을 수 없다고 나와요 | 사이트 활성 상태, 페이지 존재 여부, 공개 주소와 경로, 배포 완료 여부를 확인합니다. 편집기 내부 미리보기와 실제 사이트 주소를 구분합니다. |
이미지가 잘리거나 모바일 배치가 달라요 | 이미지의 크기 기준·채우기·모바일 이미지와 부모 영역의 폭·여백을 확인합니다. 실제 모바일 게시 화면에서도 비교합니다. |
버튼을 눌러도 원하는 곳으로 가지 않아요 | 버튼 동작·이동 주소·새 탭 여부를 확인합니다. 샘플 링크가 남았는지 보고 실제 게시 화면에서 다시 누릅니다. |
잘못 삭제했어요 | 다른 작업을 계속하기 전에 실행 취소를 사용합니다. 초기화나 롤백은 복원 대상과 범위가 다르므로 안내를 확인합니다. |
로그인 화면 또는 인증 오류가 나와요 | 로그인 상태와 해당 사이트의 접근 권한을 확인합니다. 재로그인 후에도 반복되면 발생한 화면과 시점을 기록합니다. |
Application error가 표시돼요 | 마지막으로 실행한 조작, 페이지 주소와 발생 시각을 기록합니다. 정상 화면으로 돌아왔는지 확인하기 전에 게시 버튼을 반복해서 누르지 않습니다. |
문의할 때 함께 알려 주세요
- 편집한 사이트·페이지 이름과 해당 주소
- 어떤 요소의 어떤 값을 바꿨는지
- 저장·재접속·게시 중 어느 단계에서 발생했는지
- PC·모바일 여부와 오류 문구, 발생 시각
- 개인정보·인증정보를 가린 화면 캡처
설정값이 보이는 화면과 실제 방문자 화면을 함께 준비하면 차이를 확인하기 쉽습니다.