사주 AI 웹서비스 제작노트 -3

 

사주 AI 웹서비스 제작노트 -2

 

이번 제작노트는 UI디자인 수정 과정이다.

 

사주 분석 후 뿌려지는 텍스트들을

좀 더 가독성 있게 디자인하기 위해 어찌할까 고민하는 중

ai가 찐망고라고 노랑색 추천해 줌 

너무 구리..ㅁ

사주 웹서비스 UI -Before

사주 웹서비스 UI - After

 

사주를 분석하고 나면 결과가 하나의 텍스트 형태로 전체 출력되기 때문에
일반적인 방식처럼 구조를 직접 짜고 CSS를 적용하기가 어렵다.

이 문제를 해결하기 위해 Markdown을 활용했다.

 

React에서 Markdown을 렌더링 하려면

Markdown문법을 React 컴포넌트 형태로 변환하는 과정이 필요하다.

예를 들어 #제목은 HTML의 <h1>태그로, 

- 리스트는 <ul><li> 이런식으로 Markdown은 HTML구조로 변환되어 화면에 표시된다.

 

이 과정을 직접 구현하기는 번거롭(귀찮)기 때문에,

보통 react-markdown라이브러리를 사용함.

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

<ReactMarkdown remarkPlugins={[remarkGfm]}> 
 {markdown} 
</ReactMarkdown>

 

기본 Markdown만으로는 우리가 흔히 사용하는 기능들이 부족하다.

줄바꿈처리라거나 체크박스리스트, 테이블문법, 취소선 같은 기능들을 활성화하기 위해

remark-gfm을 사용한다.

 

remarkPlugins는 Markdown을 파싱 기능을 확장하는 옵션이며,
여기에 remark-gfm을 추가하면 GitHub 스타일 Markdown(GFM)을 사용할 수 있게 됨

 

react-markdown은 Markdown을 HTML구조로 변환해주지만,

이 구조는 어디까지나 문서 형태에 가깝다.

 

실제 서비스에서는 카드 UI, 강조, 각격 구조 등이 필요하기 때문에 

단순히 CSS만 입히는 것으로도 한계가 있다.

그래서 HTML태그를 그대로 사용하는 대신

React컴포넌트로 다시 구성하는 방식으로 작업했다.

 

예를 들어, 기본 리스트(ul, li)구조를 그대로 사용하는 대신

아래처럼 컴포넌트를 커스터마이징 하여 카드 형태의 UI로 재구성했다.

<ReactMarkdown
  remarkPlugins={[remarkGfm]}
  components={{
    ul: ({ node, ...props }) => {
      const { children } = props;
      return <div className="flex flex-col gap-3 my-5">{children}</div>;
    },
    li: ({ node, children, ...props }) => (
      <div className="bg-white/[0.03] border border-white/[0.07] rounded-xl px-5 py-4 hover:border-white/10 transition-colors duration-150">
        <div className="flex items-start gap-3">
          <span className="mt-[9px] w-1 h-1 rounded-full bg-[#B89A6A]/60 flex-shrink-0" />
          <div className="text-[15px] text-white/65 leading-[1.85] [&>p]:mb-0 [&>p]:mt-0">
            {children}
          </div>
        </div>
      </div>
    ),
  }}
>
  {result}
</ReactMarkdown>

 

기본 리스트 구조를 유지한 채 스타일만 입힌 것이 아니라,
각 항목을 카드 형태의 UI로 구성하기 위해 구조 자체를 변경했다.

 

즉, `<li>`를 그대로 사용하는 대신
추가적인 요소와 레이아웃을 포함한 컴포넌트로 재구성한 것

 

이렇게 구조를 변경하면 Markdown 구조는 그대로 유지하면서

UI만 교체하는 방식으로 전체 스타일을 바꿀 수 있

사주 결과처럼 반복되는 콘텐츠도 동일한 구조로 계속 재사용할 수 있다.

 

물론 h2는 섹션 타이틀, li는 카드UI, strong는 강조 UI로 모두 매핑해줌.

Markdown 자체를 콘텐츠 + UI 구조로 동시에 사용할 수 있는 형태가 됨