CAS Insights 아티클 게시 절차

목적

본 표준 운영 절차(SOP)는 CAS Insights 아티클 게시의 일관성과 품질을 보장하기 위한 단계별 프로세스를 설명합니다.

주요 단계

1. 초안 아티클 접속 0:01

먼저 SharePoint 링크를 클릭하여 CAS Insights 아티클에 접속합니다.
'Insights article' 섹션으로 이동하여 'Draft'를 선택합니다.

2. 새로운 CAS Insights 게시물 생성 1:03

Webflow CMS에서 'CAS Insights'로 이동한 다음 'New CAS Insights'를 클릭합니다.
지정된 필드에 게시물 제목을 입력합니다.

3. 슬러그 편집 1:28

Claude와 같은 도구를 사용하거나 직접 수정하여 슬러그를 더 짧게 편집하십시오.

4. 대표 이미지 확보 2:06

디자이너 Mariah 또는 Tammy에게 Getty 이미지를 요청하십시오.
이미지가 다운로드되어 브랜드 폴더에 업로드되었는지 확인하십시오.

5. 이미지 최적화 2:50

TinyPNG를 사용하여 이미지를 AVIF 형식으로 변환하십시오.
업로드할 최적화된 이미지를 다운로드하십시오.

6. 대체 텍스트 추가 3:13

필요한 경우 LLM을 사용하여 이미지에 대한 설명이 포함된 대체 텍스트(alt text)를 생성하십시오.

7. SEO 정보 입력 3:36

SEO 제목을 게시물 제목과 일치하도록 설정하십시오.
필요에 따라 메타 설명을 업데이트하십시오.

8. 아티클 미리보기 작성 3:54

CAS Insights 메인 페이지에 표시될 아티클 미리보기 요약을 작성하십시오.

9. 게시물 본문 복사하기 4:14

Word 문서에서 이미지까지 포함한 기사 본문 전체를 복사하여 Webflow에 붙여넣으십시오.

10. 헤딩 서식 지정하기 4:33

제목에서 원치 않는 헤딩 태그(예: h3, h2)를 제거하고 가이드라인에 따라 서식을 지정하십시오.

11. 게시 날짜 설정하기 5:10

지정된 대로 게시 날짜를 입력하십시오(보통 수요일 또는 금요일).

12. 불필요한 기능 제거하기 5:20

목차 기능이 필요하지 않은 경우 제거하십시오.

13. 기사 분류하기 6:14

'신흥 과학(emerging science)'과 같이 기사에 적합한 카테고리를 선택하십시오.

14. 저자 정보 추가하기 6:34

목록에서 저자를 선택하거나 더하기 버튼을 사용하여 새 저자를 추가하십시오.

15. 티저 텍스트 포함하기 7:05

메인 페이지에 표시될 티저 텍스트를 작성하십시오.

16. 행동 유도(CTA) 버튼 추가 7:15

해당되는 경우 CTA 버튼 텍스트와 URL을 추가하십시오.

17. 리소스 버튼 처리 7:30

필요한 경우 리소스 버튼 텍스트와 URL을 추가하십시오.

18. 표 만들기 8:02

표에는 Webflow의 사전 정의된 클래스를 사용하십시오.
LLM을 사용하여 표 코드를 생성하고 사용자 지정 코드 영역에 붙여넣으십시오.

19. 기사 미리보기 9:12

프런트엔드에서 기사를 확인하여 모든 내용이 올바르게 표시되는지 확인하십시오.

20. 기사 게시하기 10:06

모든 단계를 완료하고 검토한 후 기사를 게시하십시오.

주의 사항

로딩 속도가 느려지지 않도록 모든 이미지를 적절하게 최적화하십시오.
게시하기 전에 모든 링크와 텍스트의 정확성을 다시 한번 확인하십시오.

효율성을 위한 팁

LLM 도구를 사용하여 대체 텍스트와 표 코드를 생성하면 시간을 절약할 수 있습니다.
게시 과정을 간소화하기 위해 공통 작업 체크리스트를 유지하세요.

Loom 링크

https://loom.com/share/a3358138da354fbbaee7a08ac5bd5738

‍

인라인 콜아웃 박스 – 구현 가이드

이 콜아웃 스타일을 사용하여 독자의 읽기 흐름을 방해하지 않으면서 관련 CAS 솔루션으로 안내하세요. 기사 중간에 "더 알아보기"와 같은 간단한 정보를 제공할 때 가장 적합합니다.

사용 시기

위 문단과 직접적으로 관련된 단일 솔루션으로 연결
시각적 강조를 최소화하면서 자연스럽게 유도
기사 중간 콜아웃 (기사 끝부분에는 멀티 링크 카드 스타일을 고려하세요)

Webflow 블로그 게시물에 추가하는 방법

1단계: 임베드 요소 추가하기

Webflow 디자이너에서 블로그 게시물 또는 서식 있는 텍스트(Rich Text) 필드를 엽니다
다음을 클릭합니다+아이콘을 클릭하여 새 요소를 추가합니다
선택임베드(구성 요소 하위)
콜아웃이 표시되기를 원하는 위치에 배치하십시오.

2단계: 코드 붙여넣기

다음 코드를 복사하여 임베드 영역에 붙여넣으십시오:

<div class="callout-inline"> <p class="callout-inline__text"><strong>[굵게 표시할 텍스트]</strong> [보조 텍스트]</p> <a href="[URL-경로]" class="callout-inline__link"> [링크 텍스트] <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" /> </svg> </a> </div>

3단계: 콘텐츠 사용자 지정

대괄호로 표시된 플레이스홀더를 실제 내용으로 바꾸십시오:

플레이스홀더입력 내용예시[굵게 표시할 텍스트]후킹 문구 또는 도입부더 깊이 있는 특허 인사이트가 필요하신가요?[보조 텍스트]간략한 보조 설명CAS STNext는 포괄적인 IP 분석 도구를 제공합니다.[링크 텍스트]클릭 유도 문구(CTA)STNext 살펴보기[URL-경로]URL 경로(아래 참조)/solutions/cas-stnext

4단계: URL 경로 설정

중요: cas.org 뒤의 경로만 사용하십시오. 전체 URL을 포함하지 마십시오.

✅ 올바른 예: /solutions/cas-scifinder-discovery-platform/cas-scifinder

❌ 잘못된 예: https://www.cas.org/solutions/cas-scifinder-discovery-platform/cas-scifinder

이렇게 하면 스테이징 및 프로덕션 환경 모두에서 링크가 올바르게 작동합니다.

예시

적용 전(템플릿):

<p class="callout-inline__text"><strong>[굵게 표시할 텍스트]</strong> [보조 텍스트]</p> <a href="[URL-경로]" class="callout-inline__link"> [링크 텍스트]

적용 후(완성본):

<p class="callout-inline__text"><strong>합성 계획을 세우고 계신가요?</strong> AI 기반 역합성 기술을 통해 경로 탐색 시간을 얼마나 단축할 수 있는지 확인해 보세요.</p> <a href="/solutions/cas-scifinder-discovery-platform/cas-scifinder" class="callout-inline__link"> CAS SciFinder 살펴보기

작성 팁

굵게 표시할 텍스트:독자의 고민에 공감을 이끌어낼 수 있는 질문이나 문장으로 구성하십시오.
보조 텍스트:한 문장으로 작성하고, 솔루션 이름과 주요 이점을 언급하십시오.
링크 텍스트:"탐색하기", "확인하기", "자세히 알아보기"와 같은 동작 동사를 사용하십시오.
배치:해결책 주제로 자연스럽게 이어지는 단락 뒤에 배치하십시오.

문제 해결

콜아웃이 표시되지 않음:

페이지를 저장하고 게시했는지 확인하십시오.
임베드 코드가 실수로 수정되지 않았는지 확인하십시오.

글꼴이 다르게 보임:

콜아웃은 사이트의 글꼴을 상속받습니다. 모양이 이상하다면 해당 페이지가 표준 CAS 템플릿을 사용하고 있는지 확인하십시오.

링크가 작동하지 않음:

다음으로 시작하는 상대 경로를 사용 중인지 확인하십시오./
링크 뒤에 다음을 추가하여 테스트하십시오.https://www.cas.org브라우저에서

문의 사항이 있으신가요?

웹 팀에 문의하십시오.

‍