블로그 운영 on kenji.blog

'Slack App + OAuth2를 사용하여 Slack에 메시지를 게시하는 방법'

Wed, 16 Jul 2025 23:36:27 +0900

✅ 액세스 토큰을 사용하는 게시 방법 (Slack Web API)

Slack의 “OAuth Token(xoxb-～ 등)“은 Slack의 Web API를 사용하여 게시하기 위한 키입니다. 이 경우 Webhook과는 달리 Slack API 엔드포인트 에 Authorization: Bearer 헤더와 함께 POST합니다.

🔑 필요한 전제 조건

Slack 앱에서 OAuth 범위(scope)에 chat:write 를 포함해야 합니다:

설정 절차

https://api.slack.com/apps에 접속
앱 생성 또는 기존 앱 선택
“OAuth & Permissions” > Scopes에서 → chat:write 추가
“Install to Workspace” 또는 “Reinstall"하여 Access Token 획득 (예: xoxb-xxxxxxxxxx)

💻 C++ 코드 (WinHTTP로 Slack API에 게시)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostSlackMessage(const std::wstring& accessToken, const std::string& channel, const std::string& text) {
 const wchar_t* host = L"slack.com";
 const wchar_t* path = L"/api/chat.postMessage";

 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 if (!hSession) return false;

 HINTERNET hConnect = WinHttpConnect(hSession, host, INTERNET_DEFAULT_HTTPS_PORT, 0);
 if (!hConnect) return false;

 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", path,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 // Authorization 헤더 및 Content-Type
 std::wstring headers = L"Content-Type: application/json\r\n";
 headers += L"Authorization: Bearer " + accessToken + L"\r\n";

 // JSON 본문
 std::string body = R"({"channel":")" + channel + R"(","text":")" + text + R"("})";

 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 (DWORD)-1,
 (LPVOID)body.c_str(),
 body.length(),
 body.length(),
 0);

 if (!result || !WinHttpReceiveResponse(hRequest, NULL)) {
 std::cerr << "전송 오류\n";
 return false;
 }

 // 상태 코드 확인
 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring token = L"xoxb-당신의액세스토큰"; // 액세스 토큰
 std::string channel = "채널ID또는#general"; // 예: "#general" 또는 "C0123456789"
 std::string message = "C++에서 Slack으로 게시해 보았다!";

 if (PostSlackMessage(token, channel, message)) {
 std::cout << "게시 성공!\n";
 } else {
 std::cerr << "게시 실패.\n";
 }

 return 0;
}

📌 채널 ID 확인 방법

채널 이름(예: #general)만으로는 오류가 발생할 수 있습니다. 확실한 방법은 Slack의 채널 페이지 URL에 있는 ID를 사용하는 것입니다.

1
2


https://app.slack.com/client/Txxxxx/C0123456789
 ↑ 이 부분이 채널 ID

✅ 토큰 종류에 대해 (보충)

토큰 형식	용도	예시
`xoxb-...`	Bot Token (권장)	게시·수정·삭제
`xoxp-...`	User Token (비권장)	비 Bot 계열 작업
Refresh Token	장기 토큰 갱신용	보통은 사용 안함

📝 요약

C++에서 Slack에 게시하려면 Slack Web API + Bearer Token 방식이 확실함
chat.postMessage 엔드포인트를 HTTPS POST로 사용
토큰은 Bearer 헤더로 전송할 것
채널은 ID 지정 이 확실함

'C++(Win32 API + WinHTTP)로 Slack에 메시지를 전송하는 방법 【Webhook 지원】'

Wed, 16 Jul 2025 19:42:56 +0900

C++(Win32 API + WinHTTP)로 Slack에 메시지를 전송하는 방법 【Webhook 지원】

Slack에 C++로 메시지를 전송하고 싶다. Node.js나 Python에서는 자주 볼 수 있지만, 「C++ × Win32 API × WinHTTP」로 구현하는 케이스는 드물죠.

이 글에서는 Webhook URL을 사용하여 Slack에 C++로 메시지를 전송하는 방법 을 단계별로 알기 쉽게 설명합니다.

✅ 전체 흐름

Slack에 메시지를 전송하려면 다음 단계를 따릅니다.

Slack의 Webhook URL(API 키) 얻기
WinHTTP를 사용하여 POST 요청 보내기
JSON 형식으로 메시지 본문 작성하기
결과 확인하고 완료!

🔑 Step1: Slack Webhook URL 얻는 방법

Slack에서는 Incoming Webhooks 기능을 사용하여 외부 서비스에서 간단히 메시지를 전송할 수 있습니다.

얻는 순서

https://api.slack.com/apps 에 접속
Create New App 클릭
From scratch 를 선택하고 앱 이름과 전송할 워크스페이스를 선택
왼쪽 메뉴에서 「Incoming Webhooks」 를 선택하고 활성화
「Add New Webhook to Workspace」 를 클릭하고 채널을 선택
발행된 URL(예: https://hooks.slack.com/services/xxx/yyy/zzz) 복사

이 URL이 API 키처럼 작동합니다.

💻 Step2: C++ 코드로 Slack에 메시지 전송

사용하는 기술

Win32 API
WinHTTP(표준 라이브러리)
JSON 형식의 메시지

샘플 코드(Slack 전송)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82


#include <windows.h>
#include <winhttp.h>
#include <iostream>

#pragma comment(lib, "winhttp.lib")

bool PostToSlack(const std::wstring& webhookUrl, const std::string& messageJson) {
 // URL 분해
 URL_COMPONENTS urlComp{};
 wchar_t hostName[256];
 wchar_t urlPath[1024];

 urlComp.dwStructSize = sizeof(urlComp);
 urlComp.lpszHostName = hostName;
 urlComp.dwHostNameLength = _countof(hostName);
 urlComp.lpszUrlPath = urlPath;
 urlComp.dwUrlPathLength = _countof(urlPath);

 if (!WinHttpCrackUrl(webhookUrl.c_str(), 0, 0, &urlComp)) {
 std::wcerr << L"URL 분해에 실패했습니다\n";
 return false;
 }

 // HTTP 세션 및 연결
 HINTERNET hSession = WinHttpOpen(L"SlackPoster/1.0",
 WINHTTP_ACCESS_TYPE_DEFAULT_PROXY,
 WINHTTP_NO_PROXY_NAME,
 WINHTTP_NO_PROXY_BYPASS, 0);
 HINTERNET hConnect = WinHttpConnect(hSession, hostName, urlComp.nPort, 0);
 HINTERNET hRequest = WinHttpOpenRequest(hConnect, L"POST", urlPath,
 NULL, WINHTTP_NO_REFERER,
 WINHTTP_DEFAULT_ACCEPT_TYPES,
 WINHTTP_FLAG_SECURE);

 std::wstring headers = L"Content-Type: application/json\r\n";
 BOOL result = WinHttpSendRequest(hRequest,
 headers.c_str(),
 -1,
 (LPVOID)messageJson.c_str(),
 messageJson.length(),
 messageJson.length(),
 0);

 if (!result) {
 std::cerr << "전송 요청에 실패했습니다\n";
 return false;
 }

 WinHttpReceiveResponse(hRequest, NULL);

 DWORD statusCode = 0;
 DWORD size = sizeof(statusCode);
 WinHttpQueryHeaders(hRequest,
 WINHTTP_QUERY_STATUS_CODE | WINHTTP_QUERY_FLAG_NUMBER,
 WINHTTP_HEADER_NAME_BY_INDEX,
 &statusCode, &size, WINHTTP_NO_HEADER_INDEX);

 // 리소스 해제
 WinHttpCloseHandle(hRequest);
 WinHttpCloseHandle(hConnect);
 WinHttpCloseHandle(hSession);

 return (statusCode == 200);
}

int main() {
 std::wstring webhookUrl = L"https://hooks.slack.com/services/xxx/yyy/zzz"; // 자신의 Webhook으로 교체해 주세요

 std::string message = R"({
 "text": "Hello from C++ :rocket:",
 "username": "C++ Bot",
 "icon_emoji": ":robot_face:"
 })";

 if (PostToSlack(webhookUrl, message)) {
 std::cout << "전송에 성공했습니다!\n";
 } else {
 std::cerr << "전송에 실패했습니다.\n";
 }

 return 0;
}

🧪 JSON 메시지 커스터마이즈

Slack의 Webhook에서는 다음과 같은 파라미터를 포함할 수 있습니다:

1
2
3
4
5
6


{
 "text": "알림 내용",
 "username": "Bot 이름",
 "icon_emoji": ":rocket:",
 "channel": "#원하는 채널명"
}

📌 보충 사항

Content-Type은 반드시 "application/json"을 지정
Webhook URL은 그대로 wstring으로 전달(URL 인코딩 불필요)
HTTPS 통신이므로 WINHTTP_FLAG_SECURE를 잊지 마세요

🎉 부록: Slack에서의 전송 확인 예시

Slack에 이처럼 표시됩니다:

1
2


[C++ Bot]
Hello from C++ :rocket:

✍️ 요약

항목	내용
전송 방식	Webhook (Incoming Webhooks)
통신 라이브러리	WinHTTP
데이터 형식	JSON
사용 가능 파라미터	text, username, icon_emoji, channel 등

C++로 Slack 연동이라니… 라고 생각했던 당신도 오늘부터 알림 Bot을 연동할 수 있습니다!

🚀 다음 예고?

만약 관심이 있다면 다음에는:

파일 첨부
버튼이 포함된 UI
Slack App + OAuth2에 의한 유연한 API 조작

등 한 걸음 더 나아간 Slack 연동도 소개할 수 있습니다!

'입력 폼의 필수 마크에 대하여'

Mon, 14 Jul 2025 13:47:51 +0900

해외의 화면 UI(폼)에서의 「필수」 마크에 대해, UI 가이드라인 자료와 함께 정리했습니다.

📌 주요 필수 마크와 베스트 프랙티스

애스터리스크 (*) 사용
- 일반적으로 가장 널리 보급되어 있으며, 필수 필드에 「*」를 붙입니다.
- 단, *폼 앞부분에 「 는 필수 항목입니다」 등의 설명이 필수**입니다 (Nielsen Norman Group, 캘리포니아 주립 대학교 노스리지).
- 색상을 사용하여 강조하는 예도 있습니다(빨간 글씨 등).
레이블에 “Required” 나 “(required)” 명시
- 레이블 내에 문자로 「Required」를 붙임으로써 스크린 리더에도 명시할 수 있어, 접근성이 향상됩니다 (Deque).
ARIA 속성이나 HTML5의 required 속성 병용
- 시각적 표시와 더불어, aria-required="true"나 <input required>를 사용하여 프로그래밍적으로도 필수임을 전달할 수 있습니다 (Deque).
“(optional)”을 사용하여 선택 필드 명시
- 필수 필드 대신 선택 필드를 「(optional)」로 명시하는 방법도 있으며, 혼재하는 경우에 유효합니다.
- 단, Nielsen-Norman은 「필수도 명시하는 편이 판단하기 쉽다」고 지적하고 있습니다 (TPGi).

✅ UI 가이드라인 자료 요약

제공처	내용
NN/g: Marking Required Fields in Forms	애스터리스크 + 설명문 조합이 권장되며, 선택 사항만 표시하는 것은 불친절하다는 평가 (Nielsen Norman Group).
Deque (Anatomy of Accessible Forms)	・레이블 내에 「Required」 문자열 또는 이미지를 병용. ・색상만으로 나타내는 것은 불충분하다고 명언.
W3C Techniques (H90)	애스터리스크나 「(required)」를 레이블에 포함시키고, 폼 앞부분에 의미를 정의하는 예가 있음.
TPGi (Doing what’s required)	접근성을 고려하여 애스터리스크 + ARIA 속성 + 레이블 문자 삽입이 최적이라고 평가.
Contensis 폼 UX 가이드	일관된 마크 지정(* 또는 (optional))이 중요하다고 간결하게 정리.

✅ 구현 시 추천 어프로치

폼 앞부분 에 설명문 추가：

Fields marked with * are required. (또는 일괄적으로 “All fields are required”, 선택 항목이 있는 경우는 “unless marked optional”)
레이블 부여：
- First Name * 또는 Email (required)와 같이 기술.

ARIA 속성・HTML5 속성：

1
2


<label for="email">Email <abbr title="required">*</abbr></label>
<input id="email" required aria-required="true">

색상에만 의존하지 않기：시각적 및 프로그래밍적 양쪽 모두에 대응.

🔗 참고 링크 (UI 가이드라인 자료)

NN/g: Marking Required Fields in Forms (캘리포니아 주립 대학교 노스리지, Nielsen Norman Group, Deque)
Deque: Anatomy of Accessible Forms (Deque)
W3C Techniques: H90 Indicating required form controls (W3C)
TPGi: Indicating mandatory fields accessibly (TPGi)
Contensis: UX Forms Guidelines (Contensis)

필요하시다면, 구체적인 HTML/CSS 코드 예시나 Sketch/Figma용 UI 컴포넌트 디자인 템플릿 등도 전달해 드릴 수 있습니다. 부담 없이 상담해 주세요!

'Hugo 명령어 목록'

Fri, 31 May 2024 01:36:00 +0900

Hugo란

Hugo는 정적 사이트 생성기 중 하나입니다. Markdown 파일을 HTML로 변환하여 웹사이트를 만들 수 있습니다. Hugo는 Go 언어로 작성되어 빠르게 동작합니다.

이 블로그도 Hugo로 제작되었습니다.

Hugo CLI 설치

Hugo CLI를 설치하려면 다음 명령어를 실행합니다.

※ macOS의 경우의 예시입니다. 다른 OS의 경우, 공식 문서를 참조하세요.

1

brew install hugo

Homebrew를 사용하여 설치할 수 있습니다.

Hugo 명령어 목록

Hugo에는 다양한 명령어가 준비되어 있습니다. 아래에 자주 사용하는 명령어를 정리했습니다.

새로운 사이트 만들기

1

hugo new site <사이트명>

새로운 사이트를 생성하는 명령어입니다. <사이트명>에는 사이트의 이름을 지정합니다.

새로운 글 작성하기

1

hugo new <기사명>.md

새로운 글을 작성하는 명령어입니다. <기사명>에는 글의 이름을 지정합니다.

서버 실행하기

1

hugo server

로컬 서버를 기동하는 명령어입니다. http://localhost:1313으로 접속할 수 있습니다.

빌드하기

1

hugo

사이트를 빌드하는 명령어입니다. public 디렉토리에 HTML 파일이 생성됩니다.

배포하기

1

hugo deploy

사이트를 배포하는 명령어입니다. 배포처 설정은 config.toml 파일에서 합니다.

글 목록 표시하기

1

hugo list all

작성된 글 목록을 표시하는 명령어입니다.

설정 확인하기

1

hugo config

설정을 확인하는 명령어입니다.

도움말 표시하기

1

hugo help

도움말을 표시하는 명령어입니다.

버전 표시하기

1

hugo version

버전을 표시하는 명령어입니다.

이상이 Hugo 명령어 목록입니다. 이 외에도 다양한 명령어가 준비되어 있으므로 공식 문서를 참고해 주세요.

참고

Hugo 공식 문서

웹 페이지 자동 새로고침 브라우저 확장 프로그램 (Edge 애드온)

Sat, 06 Apr 2024 15:36:54 +0900

웹 페이지를 자동으로 새로고침하는 Edge 브라우저 확장 기능 ‘탭 자동 새로고침’을 소개합니다.

탭 자동 새로고침 설치

탭 자동 새로고침

위 사이트에 접속하여 설치를 클릭합니다.

확장 기능 추가를 클릭합니다.

사용법

설치가 완료되면 Edge의 우측 상단에 아이콘이 추가됩니다.

자동으로 새로고침할 웹 페이지를 열고 아이콘을 클릭하면 자동 새로고침이 시작됩니다.

녹색 테두리 부분이 자동 새로고침되는 간격입니다. 자동 새로고침할 타이밍을 선택해 주세요.

자동 새로고침을 중지하려면 아이콘을 클릭하고 Stop reloading this tab을 클릭합니다.

멋진 웹 페이지 템플릿 (html5up)

Mon, 17 Apr 2023 00:26:55 +0900

멋진 웹 페이지 템플릿

html5up https://html5up.net/

을 사용해 보고 싶어서 남기는 메모입니다.

Google 애널리틱스에서 인기 페이지 랭킹을 가져와 배치하는 방법

Mon, 10 Apr 2023 20:26:57 +0900

시작하며

Ranklet이라는 서비스를 사용하면 Google 애널리틱스에서 인기 페이지 랭킹을 가져와 쉽게 배치할 수 있습니다.

이 글에서는 HUGO 블로그에 배치하는 방법을 소개합니다.

동작 이미지

준비

사이트에 Google 애널리틱스가 설정되어 있을 것

절차

Ranklet에 접속합니다.
Sign in with Google을 클릭하여 Google 계정으로 로그인합니다 (Google 애널리틱스 계정과 연결되어 있어야 합니다).

허용을 클릭

기본 정보를 설정합니다.

위와 같이 설정했습니다.

Google Analytics 뷰에서는 랭킹을 가져오고 싶은 뷰를 선택합니다.

텍스트 치환을 설정합니다.

위와 같이 설정했습니다. 페이지 제목의 | kenji.blog를 삭제하기 위해 설정했습니다.

템플릿을 설정합니다.

HTML (랭킹 숫자를 숨겼습니다)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


<div class="ranklet ranklet-reset">
 <table class="ranklet-table">
 <tbody class="ranklet-pages">
 {{#context.pages}}
 <tr class="ranklet-page">
 <td class="ranklet-image">
 {{#image}}
 <a href="{{url}}" class="ranklet-link">
 <img class="ranklet-img" src="{{image}}" />
 </a>
 {{/image}}
 </td>
 <td class="ranklet-meta">
 <div class="ranklet-title">
 <a href="{{url}}" class="ranklet-link">
 {{title}}
 </a>
 </div>
 {{#description}}
 <div class="ranklet-description">
 <a href="{{url}}" class="ranklet-link">
 {{description}}
 </a>
 </div>
 {{/description}}
 </td>
 </tr>
 {{/context.pages}}
 </tbody>
 </table>
</div>

CSS (폰트 크기를 변경하고, 설명문이 3줄로 표시되도록 했습니다)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55


#ranklet-{{context.id}} {
 .ranklet-reset { // 리셋
 table, tr, td, div, span {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
 line-height: 1;
 box-sizing: border-box;
 }
 }

 .ranklet-table {
 border-collapse: separate;
 border-spacing: 8px 24px;
 width: 100%;
 word-break: break-all;

 td {
 vertical-align: middle;
 }

 .ranklet-rank {
 text-align: center;
 font-size: 120%;
 }

 .ranklet-image {
 text-align: center;
 img {
 max-width: 128px;
 max-height: 128px;
 }
 }

 .ranklet-meta {
 .ranklet-title {
 font-size: 20px;
 line-height: 125%;
 }

 .ranklet-description {
 font-size: 16px;
 margin-top: 8px;
 line-height: 125%;
 display: -webkit-box;
 overflow: hidden;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3; /* 줄 수 */
 }
 }
 }
}

JavaScript는 변경 없음

사이트 게재에서 HTML을 복사합니다.

표시된 HTML을 복사합니다.

HUGO 템플릿에 붙여넣습니다.

layouts/partials/ranklet.html을 생성하고, 복사한 HTML을 붙여넣습니다.

1

<div id="ranklet-11958"></div><script src="//widget.ranklet.com/v1/ranklet/s3/widgets/11958/widget.js"></script>

layouts/_default/single.html의 </footer> 앞 줄에 아래 코드를 붙여넣습니다.

1

{{- partial "ranklet.html" . }}

이상입니다. 이제 이 페이지 아래와 같이 랭킹이 표시됩니다.

블로그에서 사용할 수 있는 사진 소재 사이트 \"Unsplash\"에 대하여

Sun, 02 Apr 2023 14:44:17 +0900

“Unsplash"에 대하여

https://unsplash.com/ko/

사진 소재 사이트 “Unsplash"를 요약하면 다음과 같습니다.

모든 이미지를 무료로 사용할 수 있음
상업적 이용 가능
이미지 가공 가능
사용 허가 불필요
출처(크레딧) 표기 불필요

블로그 글을 쓸 때 매우 유용하므로, 꼭 사용해 보시기 바랍니다.

※ 라이선스에 대해서는 아래의 “각주"를 참조해 주세요.¹

이 사이트에서도 적극 활용할 예정입니다.

Unsplash 라이선스 ↩︎

HUGO에서 HTML 태그 사용하기

Tue, 17 Jan 2023 19:20:32 +0900

HUGO의 기본 설정에서는 게시물 내에 HTML 태그를 사용할 수 없게 되어 있지만, config.toml에 아래와 같이 기재하면 사용할 수 있게 됩니다.

1
2


[markup.goldmark.renderer]
 unsafe = true

참고: Configure Markup

Web페이지 내의 모든 체크박스를 전체 체크하기

Wed, 05 Oct 2022 20:07:06 +0900

Web페이지 내의 체크박스를 전체 체크하려면, F12로 DevTools를 열고, 콘솔에 다음 코드를 붙여넣어 실행합니다.

1
2
3
4
5
6


let boxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < boxes.length; i++) {
 if (!boxes[i].disabled) {
 boxes[i].checked = true;
 }
}

또는,

새로 북마크를 생성하고, 등록할 주소(보통 https://…라고 입력하는 부분)에 다음 코드를 붙여넣어 등록합니다. 체크하고 싶은 Web페이지를 표시하고, 생성한 북마크를 클릭하면 모든 체크박스가 체크됩니다.

1

javascript:(function(){let boxes=document.querySelectorAll('input[type="checkbox"]');for(let i=0;i<boxes.length;i++){if(!boxes[i].disabled){boxes[i].checked=true;}}})();

전체 해제할 경우에는, 위 스크립트의 boxes[i].checked = true; 부분을 boxes[i].checked = false;로 변경해 주세요.

'HUGO에서 사용할 수 있는 쇼트코드'

Sun, 11 Sep 2022 22:59:52 +0900

HUGO에서 사용할 수 있는 쇼트코드

YouTube

{{<youtube 123456abc>}}

Twitter

{{<twitter 123456abc>}}

Instagram

{{<instagram 123456abc>}}

Flickr

{{<flickr 123456abc>}}

Vimeo

{{<vimeo 123456abc>}}

기타

Shortcodes

여담

사이트 상에서 {{< foo >}}라고 표현하고 싶은 경우에는, {{</* foo */>}}라고 작성해야 합니다.

'PaperMod 이미지 배치 변경'

Sun, 11 Sep 2022 18:50:40 +0900

기본 레이아웃은 이미지가 중앙에 가로폭 100%로 배치되어 있지만, 조금 크다고 느껴질 때가 있어서, 이미지를 제목 아래에 둘러싸이게 하고, 가로폭을 150px 정도로 변경해 보았습니다.

파일의 변경 사항은 다음과 같습니다.

blank.css

여백이나 이미지 크기, 텍스트 표시 줄 수를 변경하기 위해, blank.css에 다음 내용을 추가합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


.entry-content {
 -webkit-line-clamp: 4;
}

.entry-footer {
 text-align: right;
}

.entry-cover {
 margin-bottom: initial;
 text-align: center;
}

.entry-cover img {
 border-radius: 4px;
 display: inline;
 max-width: 100%;
}

.post-meta {
 display: block;
 text-align: right;
}

post-entry.css

blank.css 쪽에서 정의를 삭제할 수 없었기 때문에, post-entry.css에서 아래의 1줄을 삭제합니다.

1
2
3
4
5
6


.entry-cover img {
 border-radius: var(--radius);
 pointer-events: none;
 /* width: 100%; */ ← 이 줄을 삭제
 height: auto;
}

list.html

이미지 배치를 변경하기 위해, list.html의 다음 부분을 변경했습니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


<article class="{{ $class }}">
 <!-- {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }} --><!-- 아래로 이동 -->
 <!-- {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }} --><!-- 아래로 이동 -->
 <header class="entry-header">
 <h2>
 {{- .Title }}
 {{- if .Draft }}<sup><span class="entry-isdraft">&nbsp;&nbsp;[draft]</span></sup>{{- end }}
 </h2>
 </header>
 <div style="display:flex;"><!-- 추가 -->
 <div style="max-width:150px;margin:11px 15px 0px 0px;"><!-- 추가 -->
 {{- $isHidden := (site.Params.cover.hidden | default site.Params.cover.hiddenInList) }}<!-- 위에서 이동 -->
 {{- partial "cover.html" (dict "cxt" . "IsHome" true "isHidden" $isHidden) }}<!-- 위에서 이동 -->
 </div><!-- 추가 -->
 <div style="width:100%;"><!-- 추가 -->
 {{- if (ne (.Param "hideSummary") true) }}
 <div class="entry-content">
 <p>{{ .Summary | plainify | htmlUnescape }}{{ if .Truncated }}...{{ end }}</p>
 </div>
 {{- end }}
 {{- if not (.Param "hideMeta") }}
 <footer class="entry-footer">
 {{- partial "post_meta.html" . -}}
 </footer>
 {{- end }}
 <a class="entry-link" aria-label="post link to {{ .Title | plainify }}" href="{{ .Permalink }}"></a>
 </div><!-- 추가 -->
 </div><!-- 추가 -->
</article>

비슷한 요구 사항이 적지 않게 있는 것 같습니다.

https://github.com/adityatelange/hugo-PaperMod/discussions/159#discussioncomment-247844

본가(공식) 쪽에서도 지원해 주면 좋겠네요.

'PaperMod에서 Twitter Card를 설정하는 방법'

Sat, 10 Sep 2022 18:41:22 +0900

시작하며

PaperMod 테마는 Twitter Card를 지원합니다. 단, Twitter Card 설정은 config.toml 또는 각 게시물의 *.md 헤더 정보에 작성해야 합니다. 각 게시물과 config.toml 양쪽에 설정한 경우에는, 각 게시물의 헤더 정보가 우선됩니다.

설정 방법

config.toml

config.toml에는 [params] 아래에 images라는 항목을 추가합니다. images에는 Twitter Card에 표시할 이미지의 경로를 작성합니다. 이미지를 static 폴더에 배치할 경우에는 파일 이름만 지정하면 됩니다.

1
2


[params]
 images = ["twitter_card.jpg"]

폴더 구성

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


root
│ config.toml (여기에 작성)
├─content
│ └─posts
│ └─게시물 폴더
│ │ index.md (여기에 작성)
│ └─images
│ cover.png (여기에 배치)
└─static
 twitter_card.jpg (여기에 배치)

각 게시물의 헤더 정보

각 게시물의 헤더 정보에는 cover 아래에 image라는 항목을 추가합니다. relative를 true로 하면, 게시물의 *.md로부터의 상대 경로로 지정할 수 있습니다.

1
2
3


cover:
 image: "images/cover.jpg"
 relative: true

게시물 상단에는 표시하고 싶지 않은 경우

게시물 상단에 커버 이미지를 표시하고 싶지 않은 경우에는 cover 아래에 hidden이라는 항목을 추가하고 true로 설정합니다.

1
2
3
4


cover:
 image: "images/cover.jpg"
 relative: true
 hidden: true

이미지 크기에 대하여

현재 PaperMod의 사양상 Twitter Card의 크기는 summary_large_image만 지원하는 것 같습니다. summary_large_image의 적절한 크기(해상도)는 여러 의견이 있지만 800 x 418(이미지 비율 1.91:1) 정도가 좋을 것 같습니다.

참고 사이트1 참고 사이트2

가능하다면, 이미지 크기를 리사이징하여 게시하는 것을 추천합니다.

설정 확인 방법

Twitter Card의 설정을 확인하려면 Twitter Card Validator를 이용합니다. 단, 제 환경에서는 미리보기가 잘 표시되지 않았기 때문에, 만약 미리보기가 표시되지 않는다면 비공개 계정 등을 이용해 게시 전에 한번 확인해 보는 것을 추천합니다.

'PaperMod 색상 변경'

Wed, 07 Sep 2022 15:30:21 +0900

PaperMod 테마의 색상을 변경했습니다. 변경 방법은 아래를 참고했습니다.

https://github.com/adityatelange/hugo-PaperMod/discussions/645

CSS 경로는 아래와 같습니다.

themes/PaperMod/assets/css/extended/blank.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


:root {
 --entry: #fbf7ef;
 --primary: rgba(113, 103, 91, 1.00);
 --secondary: rgba(113, 103, 91, 0.95);
 --tertiary: rgba(113, 103, 91, 0.50);
 --content: rgba(113, 103, 91, 0.85);
 --hljs-bg: #34231B;
 --code-bg: #ebe4d7;
 --border: #fdfaf5;
 --theme: #fbf7ef;
}
.dark {
}

다크 모드는 일단 변경하지 않았습니다.

'【HUGO】로컬 환경에서 표시 프리뷰'

Mon, 05 Sep 2022 12:28:01 +0900

HUGO 설치

다운로드

HUGO 다운로드

위 사이트에서 환경에 맞는 Windows 모듈을 다운로드하여 압축을 풉니다. 제 경우에는 “hugo_0.102.3_Windows-64bit.zip"을 다운로드했습니다.

압축 풀기

다운로드한 zip 파일의 압축을 풀고 그 안의 hugo.exe를 예를 들어 C:\bin 등 폴더를 만들어 그곳에 복사합니다.

환경 변수 등록

아무 위치에서나 hugo.exe를 실행하기 위해 환경 변수에 등록합니다. Windows 11에서의 조작이지만 다음과 같은 절차로 등록할 수 있을 것입니다.

Win+Pause 버튼을 눌러 버전 정보 열기
시스템 고급 설정 클릭
환경 변수 클릭
Path를 선택하고 편집 클릭
새로 만들기를 클릭하고 새 줄에 “C:\bin"을 입력한 후 확인을 눌러 대화 상자 닫기

블로그 프리뷰하기

명령 프롬프트에서 HUGO 블로그 폴더로 이동하여 아래 명령을 실행합니다.

hugo server -D

실행 결과는 아래와 같습니다. (-D는 임시 글을 표시하는 옵션입니다.)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


C:\Users\win11\IdeaProjects\kenji.blog>hugo server -D
Start building sites …
hugo v0.102.3-b76146b129d7caa52417f8e914fc5b9271bf56fc windows/amd64 BuildDate=2022-09-01T10:16:19Z VendorInfo=gohugoio

 | JA
-------------------+-----
Pages | 39
Paginator pages | 0
Non-page files | 7
Static files | 0
Processed images | 0
Aliases | 13
Sitemaps | 1
Cleaned | 0

Built in 161 ms
Watching for changes in C:\Users\win11\IdeaProjects\kenji.blog\{archetypes,content,themes}
Watching for config changes in C:\Users\win11\IdeaProjects\kenji.blog\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

주소는 실행 시 출력되므로 (위 예에서는 http://localhost:1313/), 브라우저에 주소를 복사합니다. 프리뷰는 파일이 저장될 때마다 자동 업데이트됩니다. 프리뷰를 마치려면 명령 프롬프트에서 Ctrl+C를 입력합니다.

'블로그, 시작해 보았습니다'

Fri, 02 Sep 2022 07:23:00 +0900

블로그, 시작해 보았습니다

불꽃놀이 같은 것, 코드는 여기

안녕하세요. 어쩌다 보니 블로그를 시작해 보게 되었습니다.

특별히 “이걸 발신하고 싶다!” 같은 거창한 목적은 없고, 기술에 대한 것이나 일상적인 것, 생각난 것을 그대로 적을 수 있는 장소가 있었으면 좋겠다고 생각해서요.

너무 무리하지 않고, 메모장 같은 느낌으로 해 나가려고 합니다.

Hugo라는 녀석으로 만들고 있습니다

이 블로그는 “Hugo"라는 정적 사이트 생성기로 만들고 있습니다. 괜찮은 테마를 찾아서 기세로 도입해 보았습니다. (테마 고르는 데 2시간 정도 걸린 건 비밀입니다)

코드에 관한 것이나 관심 있는 도구 등도, 가볍게 메모해 나갈 생각입니다.

아침 코메다 이야기

참고로 오늘 아침에는 조금 일찍 일어나서, 코메다 커피에 다녀왔습니다. 8시 반에 출발해서, 아침 공기를 마시며 터벅터벅.

미니 시로느와르와 카페오레 A모닝 세트를 주문. 아마 800엔 정도였나? (기억 안 남)

아침의 카페, 좋네요. 일하기 전에 잠시 멍 때리는 시간이 있으면, 왠지 하루가 잘 풀릴 것 같은 기분이 듭니다.

그런 느낌으로, 앞으로 느슨하게 써 나가겠습니다. 기술적인 이야기도, 일상적인 일도, 섞어가며 할 예정입니다.

잘 부탁드립니다!