Home | softeon-theme
This preview sentence appears on the Projects Sample Beta card. Sample Projects Order 70
taeahnk.github.io
GitHub - TaeAhnK/softeon-theme
Contribute to TaeAhnK/softeon-theme development by creating an account on GitHub.
github.com
Codex가 프론트엔드는 매우 잘 만든다고 해서 기존의 포트폴리오 사이트를 새로 만들어보기로 했다. 웹개발 쪽은 잘 모르지만 정적 웹사이트 정도는 만들 수 있을 것 같다.
지금은 Github Pages로 호스팅하는 Jekyll 블로그를 포폴로 쓰고 있다.
사이트에서 다운 받은 템플릿을 조금 수정해 사용 중이다.
현재 사이트도 나쁘지 않지만 만들어 보고 싶은 기능이 있어 새로 만들어 보기로 했다.
가끔씩 포트폴리오를 pdf로 요구하는 회사들이 있다. 포트폴리오에 프로젝트가 늘어나고 게시글이 많아질수록 이걸 워드나 파워포인트로 옮겨서 작성하기가 어렵다. 특히 코드 블록이 모두 어그러진다.
그래서 포트폴리오에 프린트용 View를 따로 두고, 이걸 pdf로 저장해 제출하려고 한다.
기능 기획
먼저 구현해야 할 기본 기능은 다음과 같다.
- Header, Hero, Profile, Projects, Other Projects, Current Project 섹션
- Markdown 프로젝트 포스트
- 포스트에서 썸네일과 설명, 태그를 추출하고, 적절한 섹션에 적절한 순서로 배치
- 썸네일로 이미지 또는 유튜브 영상 사용
- 이후 Markdown 포스트 추가만으로 확장 가능
- 반응형으로 브라우저 크기를 줄여도 어색하지 않은 화면
이 기능들은 이전 포트폴리오에서도 수정해서 적용했었다.
추가로 구현해야 하는 기능은
- print.html에서 print용 view 보여주기
<div class="print-hide">가 있으면 print view에서 숨기기- 인쇄 시 (pdf로 출력) 적절한 위치에서 페이지 나눔
- print.html은 A4에 적절한 css
<div class="print-show">가 있으면 게시글에선 숨기고 print view에서 보여주기- print view에서 보여줄 project 개수 설정
구현
Codex에게 다음 순서로 작업을 요청했다.
- Init
- Index 페이지 구현
- Post 페이지 구현
- 테스트 게시글 생성
- 카드 제목/설명/썸네일 출력
- Youtube Embed 출력
- 디자인 파일 적용
- 다크모드 적용
- print.html 구현
<div class="print-hide">구현- 프린트모드 적용
단계별로 구현에 필요한 내용을 Feature.md에 적고, 해당 내용을 참고하며 작업을 요청했다.
먼저 블로그의 구조를 정의했다. 기존 블로그와 비슷한 구조로
- Header
- Hero
- About
- Projects
- Other Projects
- Current Projects
- Footer
로 구성했다. 프로젝트 섹션에서는 카드 형태로 게시물을 보여준다.
포스트는 간단하게 뒤로가기 버튼이 있는 헤더와 제목, 본문, Footer로 구성했다.
마크다운만으로 새 프로젝트를 추가할 수 있도록 프로젝트 포스트의 Front Matter에 다음과 같은 내용을 정의했다.
---
layout: post
title: Title
display_area: projects / other-projects / current-projects / hide
display_order: number (descending order)
thumbnail_type: img / vid
thumbnail_img: path
thumbnail_vid: "{youtube link}"
tags: tags for thumbnail
---Front Matter의 값에 따라 보일 섹션과 순서, 썸네일 타입과 썸네일을 정의했다. 썸네일에서 같이 보여줄 태그도 작성했다. display_order는 나중에 프로젝트를 추가할수록 앞에 오는 일이 많을 것 같아 내림차순으로 적용했다.
메인 페이지의 프로젝트 소개글은 excerpt_separator로 구분하고, 이 내용은 포스트를 볼 때는 보이지 않게 했다.
---
(front matter)
---
Preview Description
<!-- preview -->
(Main Post)
이건 이전 포트폴리오에서 쓰던 방식으로 preview용 마크다운을 따로 두거나 하는 다른 방식보다 편했다.
나는 디자인을 못 한다. 내가 가장 취약한 부분이다.
일단은 Google Stitchs가 웹 디자인을 해줄 수 있다고 하니 한번 사용해 보았다.
게임 개발자 포트폴리오를 만들 것이고, 위에서 만든 레이아웃을 사용할 것이라고 했다.
괜찮은 디자인이 나왔다.
프린트모드를 다크모드로 만들었다간 인쇄할 때 어떤 끔찍한 일이 생길지 모르므로 라이트모드도 만들어 달라고 했다.
AI가 유독 좋아하는 흰색+보라색 조합으로 만들어줬다. Neon 느낌이 약해졌지만, 마음에 들었다. 아쉬워도 뭐가 어색하니 고쳐달라 할 감각이 부족하다.
이 6개의 이미지를 zip으로 내보냈다. 팔레트는 Markdown, 사이트는 이미지와 html로 제공한다.
이 파일을 주고 이 디자인을 그대로 프로젝트에 적용해달라고 했다.
거의 완성된 블로그가 만들어졌다. 텍스트를 yml 파일로 수정할 수 있도록 연결하고, home.yml에서 관리할 수 있게 했다. 마음에 안 드는 간격과 위치는 조금씩 조정했다.
다크모드 버튼도 추가해달라 하고, 다크모드 디자인도 적용해달라고 했다.
print.html을 어떤 식으로 구현할지를 고민해야 했다. 우선은 index.html을 구성하는 다양한 include html을 인쇄용에 적합하게 배치하고, post collections를 이어 붙이는 방식으로 구현해 보았다. 원하는 대로 index.html이 cover 역할을 하고, post가 내용 역할을 하는 pdf가 만들어졌다. 모양과 정렬 등은 나중에 css에서 처리하기로 했다.
print.html은 별도의 css를 만들어 달라고 했다. 폰트 크기부터 규칙까지 다른 부분이 많아 적용할 내용이 많았기 때문이다. 대표적으로
- 폰트 크기 10pt
- 별도의 링크 소개
- 항상 라이트모드
<details>로 접힌 부분 모두 열어두기- 포스트 끝마다 페이지 넘기기 적용
- 코드 블록이 길어지면 줄바꿈
- 클릭해도 게시물로 넘어가지 않기
등을 적용해야 했다.
포스트에서 프린트모드에서 숨길 부분은 <div class="print-hide>로 감싸면 숨겨지게 했다. 웹에서는 코드를 모두 보여줘도 <details>로 숨겨 분량 걱정이 없지만, 이걸 그대로 출력하면 포폴이 너무 길어져 편집해야 한다. 그리고 Demo 영상도 숨겨야 한다.
그리고 출력 설정으로
- 특정 부분을 크롬 인쇄 설정으로 미표시하지 않기
- 위아래 1 inch margin
을 줘야 했다.
이런 부분은 모두 codex에 맡기고, codex가 css를 수정해 적용했다.
마지막으로 config.yml에서 레이아웃 조정이 가능하게 했다. 각 섹션의 가로 프로젝트 개수, 보여줄 프로젝트 개수, 프린트모드에서 보여줄 프로젝트 개수를 설정하게 해 개수가 달라져도 모양이 어색하지 않게 했다.
index:
projects_count: 4
other_projects_count: 3
current_projects_count: 1
print:
projects_count: 4
other_projects_count: 3
current_projects_count: 1괜찮은 Jekyll Theme이 만들어졌다.
이걸 기존 포트폴리오에 적용해 보았다.
테스트 때는 몰랐는데 폰트가 별로여서 수정했다. (한글 태그에 굴림체가 적용됐다.)
그리고 아무리 노력해도 줄 끝 맞춤과 단어 잘림의 적절한 조합을 모르겠다.
가끔 긴 단어 앞에서의 넓어지는 여백이나 어색하게 잘리는 단어, 안 맞는 줄 끝 중 하나를 택해야 한다. 이것 때문에 문장을 수정하는 경우도 종종 등장한다.
느낀 점
사실 말이 안 된다. html, css에 대한 매우 기초적인 지식은 있고, Jekyll로 다른 사람이 만든 Theme을 사용해 블로그를 만들어 봤지만 이 기술에 대한 이해는 분명 부족하다. 그럼에도 Codex에 해달라고 하면 어지간한 기능이 완성된다.
물론 한계가 있다고 생각한다. 먼저 이건 정적 웹사이트다. css, html 잘하고 예뻐 보이면 땡이다. 이건 AI가 매우 잘하는 분야일 것이다. 서버가 있는 동적 웹사이트면 다양한 오류와 요구사항에 맞지 않는 구현이 자주 나올 것이다.
기술에 대한 이해 없이 썼을 때의 문제도 있다. 먼저 토큰이다. 5시간 토큰 제한에 걸린 게 거의 처음이다. css를 잘 모르니 간단한 css 수정과 롤백도 다 Codex에 맡기게 된다. 그리고 수정을 위해 필요한 파일의 위치를 모르니 프로젝트를 다 검색하는 경우도 자주 있다. 로직을 설명하며 구현하라고 하면 더 정확하고 저렴하게 구현하지만 내가 원하는 기능을 묘사만 하고 만들어 달라고 하면 토큰이 녹는다.
이런 이유로 개발자가 필요하다고는 하지만... 결국 토큰 가성비가 좋은 모델이 나올수록 해결될 문제 아닐까? 수정해야 할 개발자가 필요하다는 것도 이전만큼 많은 개발자가 필요하지는 않다는 것이다. 기술을 아는 개발자가 필요는 하지만 많이 필요하지 않고, 기존의 개발자로 더 큰 효율을 낼 수 있는 시점이다.