인용구 공유 카드 디자인

출처가 눈에 띄는 두 줄 인용문

OpenDesign Community 라이브러리에서 배포되며 HTMLAnything을 업스트림으로 명시한 이 그래픽은 출처가 표기된 하나의 문장을 중심으로 구성됩니다. 화면은 작은 “✦ QUOTE” 라벨로 시작해 라틴 문자 기술 명칭이 섞인 큰 중국어 인용문으로 이어지고, Tom Pan의 정체성 블록으로 마무리됩니다. 이 순서 덕분에 이 결과물은 소셜 게시물이기 전에 먼저 인용구로 읽힙니다.

샘플 문장은 Markdown을 저자를 위한 형식으로, HTML을 독자를 위한 형식으로 대비합니다. 첫 줄은 “Markdown”으로, 둘째 줄은 “HTML”로 시작해 두 기술에 대등한 시각적 비중을 줍니다. 골드 강조는 선택한 중국어 단어를 표시하므로, 이 대비는 별도의 차트, 배지, 데이터 시각화가 아니라 에디토리얼 강조로 기능합니다. 이는 하나의 중국어 인용문 안에 섞인 문자들이지, 영어와 중국어의 병렬 버전이 아닙니다.

소스 CSS는 카드를 1600px, 16:9 비율, 최대 너비 96vw로 지정합니다. 이 비율은 프레젠테이션 같은 넓은 읽기 면을 만들어, 문장이 프레임 대부분을 차지하면서도 정체성 블록은 더 작은 보조 영역으로 읽히게 합니다. 대신 밀도가 의도적으로 높으므로, 인용문을 더 긴 구절로 바꾸면 줄바꿈과 글자 크기 스케일을 다시 조정해야 합니다.

표기된 출처는 Tom Pan이며, 핸들은 @tompan, 사내 문서를 HTML로 변환하는 엔지니어라는 설명과 2026.05라는 날짜가 포함됩니다. 이 정보는 중심 문장과 경쟁하지 않으면서 이름, 직무, 게시물 형식의 날짜를 제공합니다. 이는 샘플 인용 출처일 뿐이며, 검증된 개인 이력도, OpenDesign에 대한 추천사도, 템플릿에 명시된 HTMLAnything 업스트림을 대체하는 것도 아닙니다.

인용구 공유 카드 활용 사례

이 구성은 시각적 강조가 도움이 되는, 출처를 밝힐 수 있는 짧은 아이디어에 적합합니다. 에디토리얼 소셜 게시물, 콘퍼런스나 커뮤니티 인용구 시리즈, 독립된 이미지로 공개하는 사내 원칙에 쓸 수 있습니다. 어떤 경우든 카드의 두 줄 읽기 리듬을 유지하려면 원문이 충분히 짧아야 합니다.

정체성 블록은 작성자가 메시지의 일부일 때도 이 형식을 유용하게 만듭니다. 여기서 직무 줄은 사내 문서를 HTML로 변환하는 엔지니어를 설명하며 인용문에 직업적 맥락을 부여합니다. 새로운 용도에 의미 있는 작성자, 핸들, 날짜가 없다면, 왼쪽 아래 블록을 장식으로 남겨 두기보다 다른 정보 목적에 맞게 바꿔야 합니다.

혼합 문자 퍼블리싱에서 이 결과물은 문자 간의 실용적인 관계를 보여 줍니다. 라틴 문자 기술 명칭은 쉽게 훑어볼 수 있고, 중국어 문구는 문장 구조를 맡습니다. 다만 텍스트 길이와 폰트 메트릭에 따라 균형이 빠르게 바뀔 수 있습니다. 재현할 때는 현재의 줄바꿈이 그대로 적용된다고 가정하지 말고 실제 문구로 테스트해야 합니다.

혼합 문자 문장의 구성

시각적 위계는 여러 인터페이스 컨트롤이 아니라 크기와 배치로 만들어집니다. 왼쪽 위 근처에는 윤곽선이 있는 작은 골드 “✦ QUOTE” 캡슐형 라벨이 놓입니다. 중심 문장은 아주 큰 흰색과 골드 글자로 중앙 영역에 펼쳐지고, “H”와 “html-anything”는 오른쪽 위에 간결한 맥락 라벨로 나타납니다. 이런 대각선 분포 덕분에 카드가 중앙 정렬된 텍스트 블록으로 느껴지지 않습니다.

인용문의 두 줄은 서로 바꿔 쓸 수 없습니다. 첫 줄은 “Markdown”, 둘째 줄은 “HTML”로 시작하므로 독자는 중국어 문장을 다 읽기 전에 직접적인 시각적 짝을 먼저 만납니다. 두 줄에 걸쳐 선택한 중국어 단어를 골드로 강조해 반복되는 포인트가 비교를 하나로 묶습니다. 강조를 없애면 카드는 더 차분해지지만 대비를 안내하는 시각 단서를 잃게 됩니다.

배경은 눈에 보이는 격자가 있는 어두운 바탕에, 왼쪽으로 갈수록 따뜻한 갈색 조명이, 오른쪽 아래에는 올리브 골드 영역이 있습니다. 격자는 빈 공간에 절제된 구조를 주고, 색의 전환은 넓은 검은 영역이 비어 보이지 않게 합니다. 이런 분위기는 기술적인 주제를 뒷받침하지만, 밝은 글자가 두 따뜻한 영역 모두에서 읽혀야 한다는 대비 제약도 만듭니다.

왼쪽 아래에는 “T” 이니셜이 작성자 이름, 핸들, 직무, 날짜와 함께 놓입니다. 인물 사진이 없는 이 정체성 처리는 푸터를 인용문과 연결하면서도 큰 문장보다 부차적으로 유지합니다. 간결한 만큼 한계도 있습니다. 독자는 짧게 표기된 출처만 받을 뿐, 전체 프로필이나 인용문의 진위를 입증하는 근거는 받지 못합니다.

범위와 기능 경계

이 결과물은 디자인 전용 그래픽 샘플입니다. 제공된 근거는 로컬 HTML 미리보기, CSS로 정의된 카드 비율, 눈에 보이는 타이포그래피, 표기된 텍스트를 확인해 줄 뿐이며, 실시간 소셜 연동, 게시 워크플로, 연결된 데이터 소스, 측정 가능한 공유 성과를 입증하지는 않습니다. 따라서 인용문의 이름, 직무 설명, 날짜는 별도로 검증되지 않는 한 예시 콘텐츠로 취급해야 합니다.

이 템플릿은 OpenDesign Community를 통해 배포되며 HTMLAnything을 업스트림 출처로 명시하고, 표기된 인용문은 별도로 Tom Pan을 출처로 밝힙니다. 번들 매니페스트는 예제 플러그인에 MIT 라이선스를 명시하지만, 이것이 묘사된 모든 자산에 별도의 라이선스를 부여하는 것은 아닙니다. 변형 작업에서는 업스트림 크레딧을 유지하고, 사용하는 인용문, 작성자 정보, 외부 폰트에 대한 권리를 확인해야 합니다.