Infograb 기술 블로그 UX 리뉴얼 기획안 (v2.2)

1. 개요#

목표: Docusaurus 기반 블로그를 Next.js 15, React, Tailwind CSS 기반의 사용자 경험(UX) 중심 커스텀 블로그로 전환하여 가독성을 높이고, 브랜드 아이덴티티를 강화한다.
기술 스택: Next.js 15 (App Router 기반), React, Tailwind CSS. (기존 타 페이지 구현과 동일하게 적용)
핵심 방향:

😗

콜아웃이랑 이모지 죄다 나와야함. ☺️

2. 벤치마킹 인사이트 심화 (참조: 우아한형제들, Netflix, GitLab 등)#

레이아웃: 최신 트렌드는 1단 컬럼 + 우측 Sticky ToC 혹은 카드 그리드(3열) 형태. (참조: Netflix, Toss, Woowahan)
릴리즈 노트: GitLab/GitHub 형태와 같이 블로그와는 다른 타임라인 혹은 리스트 형태의 UI 적용이 유리함.
Nav: 태그가 많을 경우, 전체 나열보다는 검색 바(Search Bar) + 인기 태그 추출 방식이 효율적.
검색: 단순히 Algolia 연동을 넘어 UI/UX 관점의 고도화 필요. (예: 쿠팡 테크 블로그의 검색 UI)
썸네일: 목록에서는 거의 필수적으로 사용되며, 상세 페이지에서는 상단 Hero 영역 혹은 콘텐츠 내부 이미지로 활용하여 시각적 풍성함 제공.
GitLab Blog (about.gitlab.com/blog):
- 카테고리(Topics) 탭 필터 + 태그 클라우드 없이 검색 중심 탐색.
- Release Post는 블로그와 완전히 분리된 URL 구조(/releases/yyyy/mm/dd/...)로 운영 → Infograb Release Note 분리 전략에 직접 참고 가능.
- 저자 프로필 페이지에 Bio, SNS, 작성 글 목록 포함 → 저자 관리 모델 참고.
- RSS Feed 제공, JSON-LD Article 스키마 적용.
GitHub Blog (github.blog):
- 카테고리(Engineering, Product, Enterprise 등)를 GNB 레벨에서 분리하여 독립적인 목록 페이지 운영.
- 상세 페이지에서 저자 아바타 + Bio + 관련 글 하단 배치, 소셜 공유(X, LinkedIn, Facebook) 포함.
- Changelog(릴리즈)를 별도 서브도메인/경로로 완전 분리 → Release Note 분리의 좋은 사례.
- 다크 모드 지원 및 코드 블록 Syntax Highlight + Copy 버튼 기본 제공.
공통 트렌드 (GitLab/GitHub/Spotify/Meta 종합):
- RSS Feed는 기술 블로그에서 필수 기능으로 모든 참조 사이트가 제공 중.
- 다크 모드 지원이 기술 블로그 표준으로 자리잡는 추세.
- Sitemap 자동 생성 및 구조화된 데이터(JSON-LD) 적용이 SEO의 기본.
- 저자별 아카이브 페이지 운영이 보편적.

3. 상세 기능 명세#

A. 공통 (Framework, SEO, GEO)#

프레임워크: Next.js 15 (App Router), React, Tailwind CSS 기반으로 개발.
사이트 통합성:
- 전체 사이트의 Main Header 및 Footer를 통합하여 사용.
- 블로그 자체 Sub-Navigation (예: Tech Blog, Release Note, Search, Categories, Tags)을 구성하여 블로그 내 탐색을 용이하게 함.
GEO (지역화/국제화):
- Next.js 15의 국제화 라우팅 (i18n 설정)을 활용하여 다국어 지원 구조 마련 (필요시).
- Alternate Hreflang 태그를 통해 각 언어 버전 페이지를 검색 엔진에 알림.
- 콘텐츠 작성 시 다국어 번역에 용이한 구조 고려 (예: content/[lang]/blog/..).
SEO & OG (Open Graph):
- Meta 데이터: 모든 페이지에 <title>, <meta name="description">, <meta name="keywords"> 등 필수 메타태그 동적 생성.
- OG 태그: <meta property="og:title">, <meta property="og:description">, <meta property="og:image">, <meta property="og:url">, <meta property="og:type"> 등 모든 소셜 미디어 공유를 위한 OG 태그를 게시물 데이터 기반으로 동적 처리.
- JSON-LD: 특정 페이지(블로그 글)에 article 스키마 등 구조화된 데이터(Schema.org) 적용.

B. 메인/목록 페이지 (List View)#

레이아웃:
- Hero Section (하이라이트): 최신 글 1~6개 혹은 관리자가 지정한 ‘Featured’ 게시물을 상단에 크게 배치 (썸네일 + 큰 타이틀, 요약).
- Grid System: 반응형 3열(PC) -> 1열(Mobile) 카드 레이아웃.
게시물 카드 구성:
- 썸네일 (필수): 준비된 썸네일 이미지를 Next/image 컴포넌트로 최적화하여 16:9 비율로 시각적으로 매력적인 카드 구현.
- 카테고리(배지 형태), 제목, 짧은 요약(Description), 작성자, 작성일.
- Sub-title은 카드에서는 제외하고 요약으로 대체하여 복잡도 감소.
데이터 분리 (Blog vs Release):
- https://insight.infograb.net/blog (기본 기술 블로그)
- https://insight.infograb.net/release (Release Note)
- 구현: 상단 GNB(메뉴)에서 'Tech Blog'와 'Release Note'를 명확히 분리. Next.js의 Dynamic Routing([...slug])과 파일 시스템 기반 라우팅을 활용, 내부적으로 frontmatter의 type: 'blog' 또는 type: 'release' 필드를 기반으로 다른 콘텐츠 목록을 렌더링.
탐색 (카테고리 & 태그):
- 카테고리: 탭(Tab) 형태로 상단 배치하여 대분류 필터링 제공 (클릭 시 /blog?category=devops 등으로 이동).
- 태그 (300+개 처리):
  - "태그 검색창 (Search with Autocomplete 지원)" 도입 (자세한 내용은 검색 섹션 참조).
  - 검색창 하단에 자주 쓰는 태그(Top 10)만 칩(Chip) 형태로 노출하여 빠른 접근성 제공.
게시물 수: 현재 페이지에 해당하는 게시물 "Total: N Posts" 표시.
페이징: 1 2 3 ... 10 형태의 페이지네이션 적용 (Infinite Scroll 지양, SEO에 더 유리).

C. 검색 기능 (Search Functionality)#

검색창 (Search Bar):
- 모든 페이지 상단 GNB에 검색 아이콘 또는 검색 바 노출.
- 클릭 시 검색 오버레이 또는 전용 검색 페이지로 이동.
- 자동완성/추천 검색어 기능 (Typeahead) 제공.
전용 검색 페이지:
- URL: /blog/search
- UI/UX 개선:
  - 검색 결과: 게시물 카드 형태로 노출 (썸네일 포함).
  - 검색 필터: 카테고리, 태그(멀티 선택 가능), 작성자, 연도별 필터 제공.
  - 정렬 옵션: 최신순, 관련도순 등으로 정렬 가능.
  - "검색 결과 없음" 상태 처리: 친절한 안내 메시지와 함께 인기 글 추천.
검색 엔진 (경량 클라이언트 기반):
- 배경: 현재 Algolia를 사용 중이나 내부 검색 사용량이 극히 낮음. 트래픽 대부분이 Google 등 외부 검색을 통해 유입되므로, 검색 인프라에 과투자하는 것은 비효율적.
- 권장안: Pagefind (정적 사이트 최적화 검색)
  - 빌드 시점에 자동으로 검색 인덱스를 생성하고 클라이언트에서 검색 수행.
  - 장점: 외부 서버/SaaS 의존 없음, 비용 zero, GitLab Pages 정적 배포 환경과 완벽 호환.
  - 인덱스 크기: 게시물 수백 건 + 태그 200~~300개 규모에서 수백 KB~~1MB 수준으로 충분히 감당 가능.
  - .gitlab-ci.yml의 build 단계에서 Pagefind 인덱스 생성 → public/ 폴더에 포함하여 GitLab Pages로 배포.
- 보완 전략: 태그 Autocomplete + 카테고리 필터링
  - 300+ 태그는 Pagefind 검색과 별도로 클라이언트 사이드 Autocomplete (태그 JSON 파일 기반)로 처리.
  - 카테고리 탭 + 태그 칩 + 연도 필터를 조합하여 검색 없이도 탐색 가능한 구조 확보.
- 향후 고도화: 검색 사용량이 증가하거나 콘텐츠가 1,000건 이상으로 성장 시, Algolia 또는 Typesense Cloud(SaaS) 전환 검토.
- 참고: Meilisearch, Typesense 셀프호스팅은 별도 서버가 필요하여 GitLab Pages 정적 배포 환경에서는 사용 불가.

D. 상세 페이지 (Detail View)#

헤더 영역:
- 썸네일: 본문 최상단 Hero 영역에 크게 배치하여 시각적 강조. 또는 배경 이미지로 활용하여 타이틀과 어우러지게 연출.
- 정보: 카테고리(클릭 시 이동), 메인 타이틀, 서브 타이틀(존재 시, h1 하위에 p 혹은 h2로 구성), 작성자(아바타 포함), 작성일, 예상 독서 시간.
본문 & ToC:
- ToC (목차): 우측 사이드에 Sticky 형태로 배치. 현재 스크롤 위치에 따라 Native IntersectionObserver를 활용하여 Active State 표시. (Mobile에서는 플로팅 버튼 클릭 시 Bottom Sheet 또는 Drawer 형태로 표시).
- ToC Depth: h2, h3 레벨까지 노출하여 적절한 복잡도 유지. h4 이하는 생략하여 가독성 증대.
- Notion 호환 & MD/MDX:
  - MDX 도입 제안: 마크다운 내에서 React 컴포넌트를 직접 사용할 수 있어 Notion의 복잡한 블록(콜아웃, 테이블)을 Custom Component로 맵핑하여 깨짐 없이 표현 가능.
  - 핵심 요소 지원:
    - Callout -> 전용 Alert/Callout 컴포넌트로 디자인 매핑.
    - Tables -> Tailwind CSS 기반의 반응형 테이블 스타일 적용.
    - Mermaid Diagrams -> 클라이언트 사이드 렌더링 지원 (예: react-mermaid 또는 mermaid.js 직접 사용).
    - Mermaid ASCII Code -> Preformatted text (<pre><code>)로 정확히 표시.
    - Emoji -> Unicode 지원 및 fallback 폰트 설정.
    - Code Blocks -> Syntax Highlight (예: rehype-pretty-code 또는 prism-react-renderer) + Copy 버튼 필수.
    - YouTube Iframes -> react-player 또는 iframe 태그 직접 삽입 및 반응형 처리.
- Notion 블록 -> 컴포넌트 매핑 테이블:

Notion 블록	MDX 컴포넌트/처리	비고	Callout	`<Callout icon={} type={}>` 컴포넌트	info/warning/tip 등 타입별 스타일 분기
Table	Tailwind 반응형 `<Table>` 컴포넌트	overflow-x-auto 적용	Mermaid Diagram	`<MermaidBlock>` • mermaid.js CSR	SSR 불가, dynamic import 필수
Mermaid ASCII	`<pre><code>` (Preformatted)	monospace 폰트 고정	Code Block	`rehype-pretty-code` • Copy 버튼	언어별 Syntax Highlight
Emoji	Unicode 네이티브 렌더링	Twemoji fallback 옵션	YouTube iframe	`<VideoEmbed>` 반응형 래퍼	16:9 비율 유지, lazy load
Image	`Next/image` 자동 변환 (rehype)	AVIF/WebP, lazy loading	Bookmark/Link Preview	`<LinkCard>` 컴포넌트	OG 데이터 기반 카드 렌더링
Toggle	`<details><summary>` 또는 커스텀 Accordion	접근성(ARIA) 고려	Divider	`<hr>` • Tailwind 스타일
Quote/Blockquote	`<blockquote>` • 커스텀 스타일	좌측 보더 + 배경색

소셜 & 기능:
- 공유: 좌측 사이드(PC) 또는 하단 고정 바(Mobile)에 LinkedIn, Facebook, Link Copy 아이콘 배치.
- 보안 (무단복제 방지): user-select: none (CSS) 및 contextmenu 이벤트 막기(JS)로 우클릭/드래그 방지.
  - 참고: 이 방법들은 100% 완전한 차단은 아니며, 웹 표준 및 사용자 접근성에 영향을 줄 수 있으므로 필요성에 대한 최종 검토 필요.
하단 영역:
- 태그 리스트: 본문 하단에 관련 태그 나열 (클릭 시 해당 태그 검색 결과 페이지로 이동).
- 작성자 프로필: 저자 상세 정보(아바타, 이름, 직책, Bio, SNS 링크) 표시.
  - 저자별 목록: "View all posts by AuthorName" 링크를 통해 저자별 게시물 목록 페이지로 이동 가능 (/blog/author/[authorId]).
- 다음/이전 게시물: 현재 게시물의 이전/다음 게시물 링크를 카드 형태로 노출 (썸네일 포함).
- 관련 글 (Recommend): 현 게시물의 태그/카테고리 기반 유사도 높은 게시물 3~4개 카드 노출 (썸네일 포함).

E. 데이터 마이그레이션 및 관리#

URL 보존 (핵심):
- 기존 /blog/yyyy/mm/dd/title 형식을 그대로 유지하기 위해 Next.js의 Dynamic Routes (e.g., app/blog/[...slug]/page.tsx) 또는 rewrites 설정을 통해 기존 URL 구조를 매핑.
- 기존 포스트의 slug frontmatter 값을 그대로 사용.
콘텐츠 관리 방안 (MD/MDX 유지):
- Notion 연동 유지: Notion API를 활용하여 Markdown/MDX 파일을 자동으로 추출하고 변환하는 스크립트 구축.
- MDX 도입: Notion에서 추출된 Markdown을 MDX로 변환하여, Custom Component를 통해 Notion의 복잡한 블록을 렌더링.
- Content Layering: contentlayer 또는 gray-matter + remark/rehype 생태계를 활용하여 MD/MDX 파일 파싱 및 데이터 구조화.

저자(Author) 정보 관리:

기존: Post 내 YAML 중복 -> 변경: /data/authors.json (또는 authors.yaml) 별도 관리.

관리 구조:

json

// /data/authors.json
[
  {
    "id": "john-doe",
    "name": "John Doe",
    "email": "[EMAIL]",
    "position": "Senior Software Engineer",
    "bio": "Experienced in cloud infrastructure and DevOps. Passionate about open-source projects.",
    "avatar": "/images/authors/john-doe.jpg",
    "twitter": "<https://twitter.com/johndoe>",
    "linkedin": "<https://linkedin.com/in/johndoe>"
  },
  // ...
]

Post Frontmatter에는 authorId: "john-doe"만 기재.
효과: 저자 정보 수정 시 JSON 파일만 수정하면 모든 글에 반영되며, 저자별 목록 페이지 생성 용이.

4. 화면 설계 (Wireframe - ASCII)#

4-1. 메인 목록 페이지 (List View)#

plain

+---------------------------------------------------------------+
|  [Logo]          [Main Menus]         Tech Blog    [Search] | <-- Global Header (Main Site Nav)
+---------------------------------------------------------------+
| GEO: [KR] [EN]                                                | <-- Sub-menu / GEO Selector
| Blog Sub-Nav: [All] [Categories] [Tags] [Authors] [About]     |
+---------------------------------------------------------------+
|                                                               |
|   [ H E R O   S E C T I O N - H I G H L I G H T S (1-6) ]     |
|   +-------------------------------------------------------+   |
|   |  (Large Image - THUMBNAIL)                            |   |
|   |           [Highlight Tag]                             |   |
|   |           Main Highlighted Article Title              |   |
|   |           Short description or summary...             |   |
|   |           Author / Date / Read Time                   |   |
|   |           Read More >                                 |   |
|   +-------------------------------------------------------+   |
|                                                               |
+---------------------------------------------------------------+
|  Categories: [All] [DevOps] [Cloud] [Security] ...            | <-- Blog Category Tabs
|  -----------------------------------------------------------  |
|  [Tag Search Input (with Autocomplete)]                       | <-- 검색 기능 강화
|  Popular Tags: #Kubernetes #AWS #GitLab #Agile #FullStack     | <-- 태그 칩 (Top 10)
|  -----------------------------------------------------------  |
|  Total: 142 Posts                                             |
|                                                               |
|  +---------------------------+  +---------------------------+ |
|  | [Thumb]                   |  | [Thumb]                   | |
|  | [Category] Title of Post  |  | [Category] Title of Post  | |
|  | Short summary or desc.    |  | Short summary or desc.    | |
|  | Author / Date             |  | Author / Date             | |
|  +---------------------------+  +---------------------------+ |
|                                                               |
|  [More Cards with Thumbnails...]                              |
|                                                               |
|              [ <  1   2   3   4   5  > ]                      | <-- Paging
+---------------------------------------------------------------+
|  [Global Footer] (Infograb)                                   |
+---------------------------------------------------------------+

4-2. 상세 페이지 (Detail View)#

plain

+---------------------------------------------------------------+
|  [Logo]          [Main Menus]         Tech Blog    [Search] | <-- Global Header
+---------------------------------------------------------------+
| GEO: [KR] [EN]                                                | <-- Sub-menu / GEO Selector
+---------------------------------------------------------------+
|                                                               |
|   [ Category ]                                                |
|   Main Title of the Article                                   |
|   Sub Title goes here (Optional)                              |
|   --------------------------------------------------          |
|   (Avatar) Author Name  |  2023.10.27  |  5 min read           |
|   +-------------------------------------------------------+   |
|   |  (Large Image - THUMBNAIL as Hero Image, Optional)    |   |
|   +-------------------------------------------------------+   |
|                                                               |
+---------------------------------------------------------------+
|  (Sticky Share) |                                | (Sticky)   |
|  [Linked]       |    (Content Area - Markdown/MDX) | [ToC]      |
|  [FaceBk]       |                                |            |
|  [CopyLnk]      |    ## Introduction             | Title 1 (H2)|
|                 |    Content text...             |  Sub-1 (H3)|
|                 |                                | Title 2 (H2)|
|                 |    > Callout (Notion Style)    |            |
|                 |                                |            |
|                 |    ```python                   |            |
|                 |    print("Hello")      [Copy]  |            |
|                 |    while (true)                |            |
|                 |    ```                         |            |
|                 |                                |            |
|                 |    [Mermaid Diagram Render Area]|            |
|                 |                                |            |
|                 |    [YouTube Iframe Embed]      |            |
|                 |                                |            |
+-----------------+--------------------------------+------------+
|                                                               |
|   ------------------------                                    |
|   Tags: #DevOps #CI/CD #AWS (Clickable)                       |
|                                                               |
|   [ Previous Post ]             [ Next Post ]                 |
|   +-------------------+         +-------------------+         |
|   | [Thumb] Title...  |         | [Thumb] Title...  |         |
|   +-------------------+         +-------------------+         |
|                                                               |
|   [ About the Author ]                                        |
|   (Img) Author Name (Position)                                |
|         Bio description...                                    |
|         [ View all posts by Author ] [LinkedIn]               |
|                                                               |
|   [ Recommended for You ]                                     |
|   +---------------------------+  +---------------------------+ |
|   | [Thumb]                   |  | [Thumb]                   | |
|   | [Category] Title of Post  |  | [Category] Title of Post  | |
|   | Short summary or desc.    |  | Short summary or desc.    | |
|   | Author / Date             |  | Author / Date             | |
|   +---------------------------+  +---------------------------+ |
+---------------------------------------------------------------+
|  [Global Footer]                                              |
+---------------------------------------------------------------+

4-3. 검색 페이지 (Search Page)#

plain

+---------------------------------------------------------------+
|  [Logo]          [Main Menus]         Tech Blog    [Search] | <-- Global Header
+---------------------------------------------------------------+
| GEO: [KR] [EN]                                                | <-- Sub-menu / GEO Selector
+---------------------------------------------------------------+
|                                                               |
|  [Search Input (Algolia Custom UI)]                           |
|  Results for: "Kubernetes"                                    |
|                                                               |
|  -----------------------------------------------------------  |
|  [Filter By Category: All, DevOps, Cloud]                     |
|  [Filter By Tag: Input with multi-select chips]               |
|  [Filter By Author: Dropdown]                                 |
|  [Filter By Year: Dropdown]                                   |
|  -----------------------------------------------------------  |
|  Total: 15 Posts Found                                        |
|  Sort by: [Relevance] [Latest]                                |
|                                                               |
|  +---------------------------+  +---------------------------+ |
|  | [Thumb]                   |  | [Thumb]                   | |
|  | [Category] Title of Post  |  | [Category] Title of Post  | |
|  | Short summary or desc.    |  | Short summary or desc.    | |
|  | Author / Date             |  | Author / Date             | |
|  +---------------------------+  +---------------------------+ |
|                                                               |
|  [More Search Result Cards with Thumbnails...]                |
|                                                               |
|              [ <  1   2   3  > ]                               | <-- Paging
+---------------------------------------------------------------+
|  [Global Footer]                                              |
+---------------------------------------------------------------+

4-4. Release Note 목록 페이지#

plain

+---------------------------------------------------------------+
|  [Logo]          [Main Menus]       Release Note   [Search] | <-- Global Header
+---------------------------------------------------------------+
| GEO: [KR] [EN]                                                |
| Sub-Nav: [Tech Blog] [Release Note] [Search]                  |
+---------------------------------------------------------------+
|                                                               |
|  Release Notes                                                |
|  Total: 85 Posts                                              |
|                                                               |
|  Filter: [All Products v] [Year: 2026 v]                      |
|                                                               |
|  +-----------------------------------------------------------+|
|  | [Product Badge] GitLab 18.9 Release (2026.02.22)          ||
|  |   Key highlights: New CI/CD features, Security updates... ||
|  |   Tags: #GitLab #Release #v18.9                           ||
|  +-----------------------------------------------------------+|
|  | [Product Badge] GitLab 18.8 Release (2026.01.22)          ||
|  |   Key highlights: Performance improvements...             ||
|  |   Tags: #GitLab #Release #v18.8                           ||
|  +-----------------------------------------------------------+|
|  | [Product Badge] Teleport 17.2 Release (2026.01.15)        ||
|  |   Key highlights: New access controls...                  ||
|  +-----------------------------------------------------------+|
|                                                               |
|              [ <  1   2   3  > ]                               |
+---------------------------------------------------------------+
|  [Global Footer]                                              |
+---------------------------------------------------------------+

4-5. 저자별 목록 페이지 (Author Archive)#

plain

+---------------------------------------------------------------+
|  [Logo]          [Main Menus]         Tech Blog    [Search] | <-- Global Header
+---------------------------------------------------------------+
|                                                               |
|   +------------------+                                        |
|   | (Large Avatar)   |  Author Name                          |
|   |                  |  Position / Title                      |
|   +------------------+  Bio description text goes here...     |
|                         [LinkedIn] [GitHub] [Twitter]          |
|                                                               |
+---------------------------------------------------------------+
|  Posts by Author Name                                         |
|  Total: 24 Posts                                              |
|                                                               |
|  +---------------------------+  +---------------------------+ |
|  | [Thumb]                   |  | [Thumb]                   | |
|  | [Category] Title of Post  |  | [Category] Title of Post  | |
|  | Short summary or desc.    |  | Short summary or desc.    | |
|  | Date                      |  | Date                      | |
|  +---------------------------+  +---------------------------+ |
|                                                               |
|              [ <  1   2   3  > ]                               |
+---------------------------------------------------------------+
|  [Global Footer]                                              |
+---------------------------------------------------------------+

4-6. 모바일 레이아웃 (Mobile - 목록/상세)#

plain

[ Mobile - List View ]            [ Mobile - Detail View ]
+-------------------------+       +-------------------------+
| [=] Logo     [Search]   |       | [<] Logo     [Search]   |
+-------------------------+       +-------------------------+
| [KR] [EN]               |       | [Category]              |
| [All][DevOps][Cloud]... |       | Main Title              |
+-------------------------+       | Sub Title (Optional)    |
|                         |       | (Avatar) Author | Date  |
| [HERO - Featured Post]  |       +-------------------------+
| +---------------------+ |       | [Hero Thumbnail Image]  |
| | (Large Thumbnail)   | |       +-------------------------+
| | Title               | |       |                         |
| | Summary...          | |       | (Content Area - MDX)    |
| | Author / Date       | |       |                         |
| +---------------------+ |       | > Callout block         |
|                         |       |                         |
| Total: 142 Posts        |       | ```code     [Copy]```   |
|                         |       |                         |
| +---------------------+ |       | [Mermaid Diagram]       |
| | [Thumb]             | |       |                         |
| | [Cat] Title         | |       +-------------------------+
| | Summary...          | |       | [Share: LI / FB / Link] |
| | Author / Date       | |       +-------------------------+
| +---------------------+ |       | Tags: #DevOps #CI/CD    |
|                         |       +-------------------------+
| +---------------------+ |       | [ About the Author ]    |
| | [Thumb]             | |       | (Img) Name / Bio        |
| | [Cat] Title         | |       | [View all posts]        |
| | Summary...          | |       +-------------------------+
| | Author / Date       | |       | [Prev Post] [Next Post] |
| +---------------------+ |       | (Card)       (Card)     |
|                         |       +-------------------------+
| [ < 1 2 3 4 5 > ]      |       | [ Recommended for You ] |
+-------------------------+       | (Card) (Card)           |
| [Footer]                |       +-------------------------+
+-------------------------+       | [Floating ToC Button]   |
                                  +-------------------------+
                                  | [Footer]                |
                                  +-------------------------+

NEXA_%EB%8D%B0%EB%AA%A8_%EC%8D%B8%EB%84%A4%EC%9D%BC.png

5. 시스템 아키텍처 다이어그램#

5. 개발 고려사항 & 액션 플랜 심화#

A. 마이그레이션 (Migration)#

Framework 선정: Next.js 15 (App Router) + React + Tailwind CSS 확정.
콘텐츠 파싱:
- MDX 포맷 도입 및 remark/rehype 생태계 활용.
- contentlayer (또는 유사 라이브러리)를 사용하여 MDX 파일을 스키마에 따라 구조화된 JSON 데이터로 변환, 타입스크립트 타입 자동 생성.
URL 보존: Next.js 15의 Catch-all Segment (app/blog/[...slug]/page.tsx)를 활용하여 /blog/yyyy/mm/dd/title 패턴을 완벽히 지원. (generateStaticParams를 통해 모든 게시물 사전 생성)
Notion 연동 자동화: Notion API를 활용하여 포스팅 시점에서 MD/MDX 파일을 추출하고 로컬 또는 특정 위치에 저장하는 CLI/스크립트 개발. (Notion의 콜아웃 등을 MDX Custom Component로 변환하는 로직 포함).
기존 데이터를 위한 Custom rehype 플러그인: Notion에서 생성된 특정 마크다운 문법(예: 콜아웃)을 Next.js Custom Component로 매핑하기 위한 rehype 플러그인 개발 (예: Notion의 :::callout 문법 -> <Callout> 컴포넌트).

B. SEO / GEO / OG#

Next.js Metadata API: App Router의 metadata 객체를 활용하여 각 페이지별로 title, description, keywords, openGraph, twitter 등을 동적으로 생성.
Hreflang 구현: i18n 설정과 연계하여 Link 헤더 또는 <head> 내 rel="alternate" hreflang="x-default" 태그 동적 삽입.

C. UX/UI 디테일#

검색 구현: Pagefind를 빌드 파이프라인에 통합하고, 검색 결과 UI를 Tailwind CSS로 커스터마이징. 태그 Autocomplete는 빌드 시 생성된 tags.json 기반으로 구현.
이미지 최적화:
- 썸네일: 보유하고 있는 썸네일 이미지를 Next/image 컴포넌트를 사용하여 최적화(AVIF/WebP 변환, Lazy Loading, 반응형 사이즈). Frontmatter에 thumbnail 필드를 통해 이미지 경로를 명시하고, Storybook 등을 활용하여 썸네일 컴포넌트를 미리 개발하여 일관성을 확보.
- 콘텐츠 이미지: MDX 처리 시 <img> 태그를 Next/image 컴포넌트로 자동 변환하는 rehype 플러그인 적용.
ToC (h2, h3****): rehype-slug 및 rehype-autolink-headings를 사용하여 제목에 ID를 부여하고, 이를 기반으로 ToC를 생성. 스크롤 인터섹션 옵저버(IntersectionObserver)를 활용하여 현재 뷰포트에 있는 제목을 강조.
콘텐츠 보호: user-select CSS 속성 및 자바스크립트 contextmenu, keydown 이벤트 (F12, Ctrl+Shift+I 등) 리스너를 추가하여 무단 복제 및 개발자 도구 접근을 최소화. (UX 저해 요소를 고려하여 최종 적용 여부 결정).

D. 배포 및 운영 - GitLab CI/CD 워크플로우#

GitLab Repository 구조:
- /.gitlab-ci.yml: CI/CD 파이프라인 정의 파일
- /content/: Notion API를 통해 가져오거나 수동으로 작성된 MD/MDX 파일 (Blog, Release)
- /data/authors.json: 저자 정보
- /public/images/thumbnails/: 썸네일 이미지 저장 위치

GitLab CI/CD 파이프라인 구상:

단계 (Stages):
1. fetch_content: Notion API를 호출하여 최신 콘텐츠를 MD/MDX 파일로 /content 디렉토리에 가져오고, 이미지/썸네일도 /public/images 등으로 동기화.
2. lint: 코드 스타일 및 품질 검사 (ESLint, Prettier).
3. test: 단위 테스트 및 통합 테스트 실행 (Jest, React Testing Library).
4. build: Next.js 프로젝트 빌드 (next build). contentlayer를 통해 MDX 파일이 구조화된 데이터로 변환되는 과정 포함.
5. deploy: 빌드된 결과물 (정적 파일 또는 서버리스 함수)을 대상 환경에 배포. (Vercel, AWS S3/CloudFront, Kubernetes 등).

/.gitlab-ci.yml 예시 (간략):

yaml

stages:
  - fetch_content
  - lint
  - test
  - build
  - deploy

variables:
  NODE_VERSION: "20.x"
  NPM_CACHE_DIR: "$CI_PROJECT_DIR/.npm"

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - .npm/
    - .next/cache/ # Next.js 빌드 캐시
  policy: pull-push

# 컨텐츠 동기화 (Notion API 연동)
fetch_content_job:
  stage: fetch_content
  image: node:$NODE_VERSION
  script:
    - npm install # 또는 yarn install
    - node scripts/sync-notion-content.js # Notion API 호출 및 MD/MDX, 이미지 동기화 스크립트 실행
  artifacts:
    paths:
      - content/
      - public/images/thumbnails/ # 동기화된 썸네일 이미지 포함
    expire_in: 1 day


# Linting
lint_job:
  stage: lint
  image: node:$NODE_VERSION
  script:
    - npm ci --cache $NPM_CACHE_DIR
    - npm run lint

# Testing
test_job:
  stage: test
  image: node:$NODE_VERSION
  script:
    - npm ci --cache $NPM_CACHE_DIR
    - npm run test

# 빌드
build_job:
  stage: build
  image: node:$NODE_VERSION
  script:
    - npm ci --cache $NPM_CACHE_DIR
    - npm run build
  artifacts:
    paths:
      - .next/
      - public/ # 빌드된 Next.js 정적 자산 및 public 디렉토리 포함
    expire_in: 1 week

# 배포 (예: Vercel 또는 S3/CloudFront)
deploy_production:
  stage: deploy
  image: node:$NODE_VERSION # Vercel CLI 또는 aws-cli 등이 설치된 이미지 사용 권장
  only:
    - main # main 브랜치에 merge될 때만 배포
  script:
    - npm ci --cache $NPM_CACHE_DIR
    - # Vercel CLI를 사용한 배포
    - npm install -g vercel
    - vercel deploy --prebuilt --prod --token $VERCEL_TOKEN
    # 또는 AWS S3/CloudFront 배포
    # - aws s3 sync .next/static s3://your-bucket-name/_next/static --delete --acl public-read
    # - aws s3 sync public s3://your-bucket-name --delete --acl public-read
    # - aws cloudfront create-invalidation --distribution-id YOUR_CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
  environment: production

Pre-rendering (SSG) + ISR (Incremental Static Regeneration):
- Next.js의 SSG 기능을 최대한 활용하여 모든 블로그 게시물을 빌드 시점에 정적으로 생성, 로딩 속도 최적화 및 서버 부담 감소.
- ISR 전략: 콘텐츠 업데이트 시 전체 재빌드 없이 변경된 페이지만 재생성. revalidate: 3600 (또는 On-demand Revalidation via Webhook)을 통해 Notion 콘텐츠 변경 시 자동 반영.
- Fallback: 새로 추가된 게시물은 dynamicParams = true + generateStaticParams로 최초 요청 시 생성 후 캐싱.

E. 추가 필수 기능 (보강 사항)#

RSS Feed 생성:
- 빌드 시점에 /blog/rss.xml 및 /release/rss.xml 자동 생성.
- feed 라이브러리 또는 Next.js Route Handler (app/blog/rss.xml/route.ts)로 구현.
- 기술 블로그 표준 기능으로 반드시 포함.
Sitemap 자동 생성:
- Next.js App Router의 sitemap.ts 활용하여 모든 블로그/릴리즈/카테고리/태그/저자 페이지 URL 자동 포함.
- robots.ts에서 sitemap 경로 명시.
URL 리다이렉트 전략 (301 Redirect):
- Docusaurus 기존 URL에서 변경되는 경로가 있을 경우 next.config.js의 redirects 설정으로 301 리다이렉트 매핑.
- 마이그레이션 전 기존 URL 전수 크롤링하여 리다이렉트 맵 사전 작성.
- 404 페이지: 커스텀 404 페이지에서 인기 글 추천 및 검색 유도.
다크 모드 (Dark Mode):
- Tailwind CSS의 dark: variant를 활용하여 다크 모드 지원.
- next-themes 라이브러리로 시스템/수동 테마 전환 구현.
- 코드 블록 Syntax Highlight도 다크 모드 대응 필요.
성능 목표 (Core Web Vitals):
- LCP (Largest Contentful Paint): 2.5초 이하 목표. Hero 썸네일 priority 설정, 폰트 최적화.
- FID/INP (Interaction to Next Paint): 200ms 이하. JS 번들 최소화, 클라이언트 컴포넌트 lazy loading.
- CLS (Cumulative Layout Shift): 0.1 이하. 이미지 width/height 명시, 폰트 font-display: swap.
- Lighthouse CI를 GitLab CI 파이프라인에 통합하여 빌드마다 성능 회귀 감지.
접근성 (Accessibility):
- WCAG 2.1 AA 수준 준수 목표.
- 시맨틱 HTML (<article>, <nav>, <aside> 등) 적용.
- 키보드 네비게이션 및 스크린 리더 호환 (ARIA 라벨).
- 색상 대비 비율 4.5:1 이상 유지 (다크 모드 포함).

F. AEO (AI 검색 최적화) 전략#

현재 트래픽이 외부 검색 유입 중심이며, ChatGPT·Perplexity·Google AI Overview 등 AI 기반 검색 엔진에서 콘텐츠가 인용되는 것이 기존 SEO만큼 중요해지고 있음.

구조화 데이터 강화 (JSON-LD):
- 블로그 게시물: TechArticle 또는 Article 스키마 적용.
- author, datePublished, dateModified, headline, description, image 필드 완비.
- FAQ 형태 콘텐츠가 있는 경우 FAQPage 스키마 추가 적용.
- BreadcrumbList 스키마로 사이트 구조 명시.
AI 크롤러 접근 허용 정책 (robots.txt):
- GPTBot (OpenAI), PerplexityBot, ClaudeBot (Anthropic), Google-Extended 등 주요 AI 크롤러를 명시적으로 허용.
- 현재 많은 사이트가 AI 크롤러를 차단 중이므로, 허용만으로도 경쟁 우위 확보 가능.
- 예시:
  plain
```
# robots.txt
User-agent: GPTBot
Allow: /blog/
Allow: /release/

User-agent: PerplexityBot
Allow: /blog/
Allow: /release/

User-agent: ClaudeBot
Allow: /blog/
Allow: /release/
```
콘텐츠 구조 최적화 (AI 인용 친화적):
- 헤딩(H2/H3) 계층을 명확하게 유지하여 각 섹션이 독립적으로 인용 가능한 단위가 되도록 구성.
- TL;DR 패턴: 글 상단에 핵심 내용 요약 배치 → AI가 답변에 인용하기 쉬운 구조.
- 코드 블록에 언어 명시, 단계별 설명은 순서 리스트 활용.
- 기술 용어 정의가 포함된 콘텐츠는 DefinedTerm 스키마 고려.
Canonical URL 안정성:
- 마이그레이션 시 URL 보존이 AI 검색에서도 핵심 — 기존 AI 크롤러의 인용 참조가 깨지지 않도록.
- 모든 페이지에 <link rel="canonical"> 명시.
RSS Feed → AI 검색 소스:
- Perplexity 등 일부 AI 엔진이 RSS를 콘텐츠 소스로 활용.
- 기술 블로그 RSS Feed를 Perplexity Sources 등에 등록 검토.
모니터링:
- Google Search Console에서 AI Overview 노출 현황 모니터링.
- 주요 기술 키워드로 ChatGPT/Perplexity 검색 시 Infograb 콘텐츠 인용 여부 정기 점검.
페이지별 URL 구조 정리:

페이지	URL 패턴	비고	블로그 목록	`/blog`	카테고리 필터: `/blog?category=devops`
블로그 상세	`/blog/yyyy/mm/dd/slug`	기존 URL 보존 필수	Release Note 목록	`/release`	제품별 필터: `/release?product=gitlab`
Release Note 상세	`/release/yyyy/mm/dd/slug`	기존 URL 보존	검색	`/blog/search`	쿼리: `/blog/search?q=kubernetes`
태그별 목록	`/blog/tags/[tag]`	태그 클릭 시 이동	카테고리별 목록	`/blog/category/[category]`	카테고리 클릭 시 이동
저자별 목록	`/blog/author/[authorId]`	저자 프로필 + 게시물 목록	RSS	`/blog/rss.xml`	자동 생성
Sitemap	`/sitemap.xml`	자동 생성

6. 요구사항 대응 체크리스트 (Traceability Matrix)#

요구사항	반영 여부	기획안 반영 위치	Next.js 15 / React / Tailwind CSS	✅	섹션 1, 3-A, 5-A
서브메뉴 감안 하위 메뉴 노출	✅	섹션 3-A-2 (Sub-Nav)	GEO 적용	✅	섹션 3-A-3, 5-B
Meta / OG 데이터 처리	✅	섹션 3-A-4, 5-B	카드 형태 목록	✅	섹션 3-B-2, 와이어프레임 4-1
하이라이트 영역 (1~6개)	✅	섹션 3-B-1 (Hero Section)	카테고리 필터링	✅	섹션 3-B-4
페이징 형태	✅	섹션 3-B-6	URL 보존 / 마이그레이션	✅	섹션 3-E-1, 5-A-3, 5-E-3
게시물 갯수 표시	✅	섹션 3-B-5	Release Note 데이터 분리/관리	✅	섹션 3-B-3, 와이어프레임 4-4
태그 300+ 처리 (Autocomplete 검색)	✅	섹션 3-B-4, 3-C	검색 전략 (경량 Pagefind + 태그 필터링)	✅	섹션 3-C-3 (Pagefind 기반 정적 검색)
검색 전용 페이지 / 검색창	✅	섹션 3-C-1, 3-C-2, 와이어프레임 4-3	썸네일 활용 (상세 Hero)	✅	섹션 3-D-1
ToC Depth (h2, h3)	✅	섹션 3-D-2	LinkedIn / Facebook / 링크 복사	✅	섹션 3-D-3
MD/MDX 퍼블리싱 고려	✅	섹션 3-D-2, 3-E-2, 5-A-2	Notion 블록 호환 (콜아웃/테이블/머메이드 등)	✅	섹션 3-D-2 (매핑 테이블 포함)
태그 표시 + 클릭 시 연관 글	✅	섹션 3-D-4, 5-E-6 (URL 구조)	다른 게시물 이동 (카드형)	✅	섹션 3-D-4 (이전/다음 + Recommend)
무단복제 방지 (우클릭 차단)	✅	섹션 3-D-3, 5-C-4	Sub title 지원	✅	섹션 3-D-1
저자별 목록 페이지	✅	섹션 3-D-4, 와이어프레임 4-5	저자 정보 관리 (JSON 분리)	✅	섹션 3-E-3 (authors.json)
카테고리 클릭 시 목록 이동	✅	섹션 3-B-4, 3-D-1, 5-E-6	Recommend 콘텐츠	✅	섹션 3-D-4
댓글 불필요	✅	미포함 (요구사항 대로)	타사 벤치마킹 (GitLab/GitHub 포함)	✅	섹션 2 (심화 추가)
✨ 보강: RSS Feed	✅	섹션 5-E-1	✨ 보강: Sitemap 자동 생성	✅	섹션 5-E-2
✨ 보강: 301 Redirect / 404 전략	✅	섹션 5-E-3	✨ 보강: 다크 모드	✅	섹션 5-E-4
✨ 보강: Core Web Vitals 성능 목표	✅	섹션 5-E-5	✨ 보강: ISR 전략	✅	섹션 5-D-3
✨ 보강: 모바일 와이어프레임	✅	와이어프레임 4-6	✨ 보강: 페이지별 URL 구조 정리	✅	섹션 5-E-7
✨ 보강: AEO (AI 검색 최적화) 전략	✅	섹션 5-F (AI 크롤러 허용, 구조화 데이터, TL;DR 패턴)	✨ 보강: 접근성 (WCAG 2.1 AA)	✅	섹션 5-E-6

이 기획안은 Infograb 기술 블로그의 UX를 Next.js 15 기반으로 혁신하고, GitLab Repo + GitLab Pages 정적 배포 환경에 최적화된 구체적인 로드맵입니다. 특히 검색은 Pagefind 경량 클라이언트로 최소 구현하되, AEO(AI 검색 최적화) 전략을 통해 ChatGPT·Perplexity 등 AI 검색 엔진에서의 콘텐츠 인용을 극대화하는 방향으로 설계했습니다. Notion 콘텐츠 호환성을 MDX로 높이고, 저자 관리를 효율화하며, GitLab CI/CD를 통한 빌드·배포 자동화까지 포함합니다.

노션 커스텀 에이전트로 pmo 관련 어시스턴트를 제공 해주세요.

pmo 활동에 대해 어떤 질문을 할 수 있는지 선정 및 정돈
- ex) 주간 싱크를 위한 프로젝트 현황?
- ex) 리소스 투입 통계?
정기 보고서 콘텐츠 페이지 생성
현재의 프로젝트 내용 판단하고
고객사 정보에 따른 관련 내용을 추가해
현재의 slack 프로젝트 채널
리니어를 참조해
담당자 별 체크해야 할 내용들
담당자들이 지금 업무를 밀리고 있는 것들
담당자별 리소스의 투입이 누가 과도화 되고 있는지,
주간 리소스현황
프로젝트가 요새 과업이 많고 버든과 트래픽이 많은 것을 판단
정기 보고서가 필요한것
점검이 필요한 시점

링크

💡

어ㅣㅏ;ㅁ리ㅏㅓㅁ;ㅇ너ㅏㄹ;ㅣㅏㅓㅁ나어리먼이;ㅏ이

게시물 테스트를 해보겠습니다.게시물 테스트를 해보겠습니다.게시물 테스트를 해보겠습니다.

Infograb 기술 블로그 UX 리뉴얼 기획안 (v2.2)

1. 개요#

2. 벤치마킹 인사이트 심화 (참조: 우아한형제들, Netflix, GitLab 등)#

3. 상세 기능 명세#

A. 공통 (Framework, SEO, GEO)#

B. 메인/목록 페이지 (List View)#

C. 검색 기능 (Search Functionality)#

D. 상세 페이지 (Detail View)#

E. 데이터 마이그레이션 및 관리#

4. 화면 설계 (Wireframe - ASCII)#

4-1. 메인 목록 페이지 (List View)#

4-2. 상세 페이지 (Detail View)#

4-3. 검색 페이지 (Search Page)#

4-4. Release Note 목록 페이지#

4-5. 저자별 목록 페이지 (Author Archive)#

4-6. 모바일 레이아웃 (Mobile - 목록/상세)#

5. 시스템 아키텍처 다이어그램#

5. 개발 고려사항 & 액션 플랜 심화#

A. 마이그레이션 (Migration)#

B. SEO / GEO / OG#

C. UX/UI 디테일#

D. 배포 및 운영 - GitLab CI/CD 워크플로우#

E. 추가 필수 기능 (보강 사항)#

F. AEO (AI 검색 최적화) 전략#

6. 요구사항 대응 체크리스트 (Traceability Matrix)#

Mantis for n8n으로 ROI를 자동 측정하세요

Eva

관련 글

이건뭐냐.이건뭐냐.이건뭐냐.이건뭐냐.이건뭐냐.이건뭐냐.이건뭐냐.이건뭐냐.

테스트 데이터 테스트 데이터 (1)