들어가며
데이터 구조와 로직을 먼저 설계한 이후, 화면을 그려야 했다.
구현의 1번 목표는
“데이터를 UI에 연결해서 실제로 보여주는 것”
현재까지 상태
현재까지 진행한 것은
Markdown → 파싱 → projectMapper → Project[]
즉, UI에 필요한 데이터는 이미 준비했다.
이번 작업은 이 데이터를
“어떻게 보여줄 것인가”에 대한 구현이다.
UI 구조 설계
전체 UI는 Grid 기반으로 설계했다.
그리고 Apple을 좋아해서 Liquid Glass를 카드에 적용 했다.
기본: N X N
웹: 3 X 3
태블릿: 2 x 2
모바일: 1 x 1
자기소개서, 링크, 컨택트, 벨로그 글은 고정크기를 가지도록
각 포트폴리오를 보여주는 카드는 사이즈를 최대 각각 3을 가지도록 했다.
카드 설계 기준
1. 카드는 다음과 같은 정보를 포함한다.
썸네일 이미지
프로젝트 제목
간단한 설명 (summary)
기술 스택 (tags)
여기서 중요한 기준은 하나였다.
카드는 요약만 보여주는 역할이고,
클릭시 Modal을 열어 md 컨텐츠 까지 보여주도록 설계했다.
그보다 자세한 건 velog링크를 걸어 설계 과정을 보여줄 수 있게 설정했다.
카드는 사용자의 클릭을 유도하는 요소다.
2. 데이터 → UI 직접 연결
const projects = getAllProjects()
이 데이터를 그대로 map으로 렌더링했다.
projects.map((project) => (
<ProjectCard key={project.slug} {...project} />
))
데이터 구조를 UI에 그대로 유지보수가 쉽게 만들었다.
3. 정적 데이터 기반 UI
DB 없이 Markdown 기반 정적 데이터를 사용한다.
이 구조 덕분에:
- 서버 없이도 동작 가능
- 빠른 렌더링
- 구조가 단순함
구현하면서 느낀 점
데이터 구조를 먼저 잡고 UI를 그리면서 컴포넌트 만들기가 좀 더 쉽다고 느껴졌다.
처음에 머릿속에서 흐릿하던 데이터 들이 설계 과정 중에서 구체화 되고 구체화된 것들을 바탕으로 UI를 만들면서 좀 재밌기도 했다.
아직 남은 부분
카드까지는 구현 했고
- 카드 클릭 시 Modal 열기
- Modal에서 Markdown content 렌더링
- admin 관련 페이지 작업
- 배포 및 최적화
마무리
데이터 구조가 실제 UI로 연결되는 과정
설계가 어떻게 화면으로 나타나는지 확인하는 과정
이었다.
이제부터는 단순한 레이아웃이 아니라
사용자 경험(UX)을 만드는 단계로 넘어가게 된다.
