들어가며
프로젝트는 계속 쌓였지만, 정작 저를 설명하는 화면은 그 속도를 따라오지 못했습니다.
GitHub 프로필 상단 배너는 무난했고, github.io도 “일단 만들어 둔 기본 소개 페이지”에 가까웠습니다. 보기에는 깔끔했지만, 처음 들어온 사람이 몇 초 안에 저를 이해하기에는 부족했습니다.
포트폴리오 페이지라면 적어도 아래 세 가지는 빠르게 보여야 한다고 봤습니다.
- 어떤 분야에 관심이 있는지
- 어떤 프로젝트를 만들어왔는지
- 어떤 방식으로 기록하고 성장하는지
기존 페이지는 이 질문에 충분히 답하지 못했습니다.
그래서 이번에는 단순히 디자인만 손보는 데서 멈추지 않고, GitHub 프로필과 github.io를 함께 정리해 저를 설명할 수 있는 포트폴리오형 자기소개 페이지로 다시 구성했습니다.
특히 GitHub 프로필 상단 배너는 기존의 무난한 소개 이미지를 대신해, 제가 계속 써오던 오리 캐릭터를 바탕으로 손그림 느낌의 리브랜딩된 배너로 바꾸며 첫인상 자체를 다시 설계했습니다.
왜 개편했는가
기존 페이지의 문제는 완성도가 아니라 설명력이었습니다.
화면이 지저분한 것은 아니었습니다.
다만 “그래서 이 사람은 어떤 개발자인데?”라는 질문에 바로 답하지 못했습니다.
섹션은 있었지만 흐름이 약했고, 정보는 있었지만 인상이 남지 않았습니다.
포트폴리오에서 중요한 건
“정리되어 보이는가”보다 “이 사람이 보이는가”라고 생각합니다.
특히 아직 배우고, 만들고, 기록하는 단계라면
대단해 보이게 포장하는 것보다
관심사와 대표 작업, 기록 방식이 또렷하게 보이는 편이 훨씬 설득력 있습니다.
이번 개편도 그 기준에서 출발했습니다.
예쁜 페이지를 만드는 것보다,
저를 더 빠르게 이해할 수 있는 페이지를 만드는 것.
그게 이번 작업의 핵심이었습니다.
이번에 바꾼 것
1. GitHub 프로필 상단을 손그림 감성의 캐릭터 배너로 다시 리디자인했습니다
기존 배너는 깔끔했지만 인상이 약했습니다.
이름과 전공, 관심 분야는 보였지만 분위기까지 전달되지는 않았고, 결국 첫 화면에서 남는 건 정보보다 형식에 가까웠습니다.
그래서 이번에는 단순히 텍스트를 배치하는 대신, 제가 계속 사용해오던 오리 캐릭터를 바탕으로 손그림 느낌의 배너로 다시 리디자인했습니다.
너무 딱딱하지도, 그렇다고 과하게 유아틱하지도 않게 조정하면서, 귀엽지만 정돈된 톤으로 첫인상을 다시 잡고 싶었습니다.
배너 안에는 이름과 전공, 관심 분야를 그대로 두되,
부드러운 파스텔 톤과 손으로 그린 듯한 선, 클로버 포인트를 함께 넣어
“무난한 소개 이미지”보다 조금 더 기억에 남는 자기소개 화면이 되도록 구성했습니다.
거창한 브랜딩을 하겠다는 뜻은 아닙니다.
다만 첫 화면에서
“이건 이 사람의 페이지구나”라는 감각, 그리고
“딱딱한 소개보다 조금 더 편하게 다가오는 개발자”라는 인상은 남기고 싶었습니다.
오리 캐릭터와 손그림 질감을 반영한 배너로 다시 구성하며, GitHub 프로필의 첫인상을 더 선명하게 정리했습니다.
2. github.io를 ‘자기소개의 흐름’에 맞게 다시 설계했습니다
기존 github.io는 기본 소개 페이지에 가까웠습니다.
보기에는 깔끔했지만, 페이지를 따라 내려가면서 저를 이해하게 되는 구조는 약했습니다.
그래서 이번에는 섹션을 단순히 나열하지 않고,
처음 방문한 사람이 자연스럽게 저를 이해하도록 정보의 순서를 다시 잡았습니다.
첫 화면에서는 저를 짧게 소개하고 핵심 링크를 보여준 뒤,
그 아래에서 About Me → 대표 프로젝트 → 기록과 이력 → GitHub · Velog · 연락처로 이어지도록 구성했습니다.
즉, 예쁜 섹션을 늘어놓는 것이 아니라
“이 사람은 누구고, 무엇을 해왔고, 어디서 더 확인할 수 있는가”가
자연스럽게 이어지는 구조를 만드는 데 더 집중했습니다.
아무리 화면이 깔끔해도
“그래서 이 사람이 어떤 걸 하는 사람인지”가 보이지 않으면
자기소개 페이지 역할은 충분하지 않다고 봤기 때문입니다.
기본 소개 페이지에 머물던 구조를, 자기소개와 프로젝트 중심의 흐름으로 다시 정리했습니다.
3. GitHub 프로필과 github.io의 역할을 분리하고 톤을 맞췄습니다
사이트만 바꾸는 것으로는 부족했습니다.
실제로는 github.io보다 GitHub 프로필 README를 먼저 보게 되는 경우가 많고,
두 공간이 서로 다른 분위기와 메시지를 가지면 오히려 인상이 분산됩니다.
그래서 이번에는 역할을 분명히 나눴습니다.
- GitHub 프로필은 첫인상을 만드는 공간
- github.io는 저를 더 자세히 설명하는 공간
- Velog와 저장소는 기록과 결과물을 이어서 확인하는 공간
핵심은 각각을 따로 꾸미는 것이 아니라,
하나의 자기소개 흐름 안에서 자연스럽게 이어지도록 맞추는 것이었습니다.
GitHub 프로필은 손그림 감성의 캐릭터 배너로 첫인상을 만들고, github.io는 그 인상 위에서 프로젝트와 기록을 더 자세히 보여주는 구조로 역할을 나눴습니다.
아직 완벽하다고 말할 단계는 아니지만,
최소한 “프로필은 프로필대로, 사이트는 사이트대로 따로 노는 느낌”은 줄이고 싶었습니다.
GitHub 프로필과 github.io의 톤을 맞추며 하나의 자기소개 흐름으로 정리했습니다.
이번 작업에서 가장 중요하게 본 것
이번 작업에서 가장 중요하게 본 건
화려함보다 설명력, 무난함보다 인상이었습니다.
기술 스택을 길게 나열하는 방식보다,
대표 프로젝트와 기록의 흐름이 먼저 보이도록 구성하는 편이
지금 단계의 저를 더 솔직하게 보여준다고 판단했습니다.
무엇에 관심이 있는지,
무엇을 만들어봤는지,
어떤 방식으로 공부하고 기록하는지가 드러나야
페이지가 비로소 자기소개 역할을 한다고 봤기 때문입니다.
이번 개편을 하면서 다시 확인한 것도 분명했습니다.
상단 이미지 하나, 섹션 순서 하나, 링크 배치 하나만 바뀌어도
페이지 전체의 인상은 크게 달라집니다.
결국 포트폴리오는 만든 것을 모아두는 공간이 아니라,
내가 어떤 사람인지 납득시키는 공간에 더 가깝다고 생각합니다.
앞으로 더 보완할 것
이번 개편으로 방향은 정리됐지만, 아직 손볼 부분도 분명합니다.
대표 프로젝트마다 GitHub, Demo, 관련 글 링크를 더 명확하게 연결할 필요가 있습니다.
현재는 일부 프로젝트 정리 글이 비공개 상태라, 공개 가능한 범위부터 순서대로 연결해 나갈 계획입니다.
또 GitHub 프로필과 github.io 모두에서
저를 한 줄로 선명하게 설명하는 문장도 더 다듬고 싶습니다.
반응형 대응, 메타 태그, 썸네일 이미지 같은 세부 완성도도
계속 챙겨야 할 부분입니다.
이 페이지는 한 번 만들어두고 끝나는 정적인 소개 화면이 아니라,
프로젝트와 기록이 쌓일수록 같이 성장해야 더 의미가 있다고 생각합니다.
마무리
이번 작업은 새로운 기능을 만드는 개발이라기보다,
지금까지 만든 것들과 앞으로 만들 것들을 어떻게 보여줄지 설계한 작업에 더 가까웠습니다.
기본 github.io에서 벗어나
저를 소개하고, 대표 프로젝트를 보여주고, 기록의 흐름까지 연결하는 페이지로
한 단계 정리했다는 점에서 의미가 있었습니다.
앞으로는 이 페이지를 단순한 소개 화면으로 두지 않고,
프로젝트와 기록이 계속 쌓이는 포트폴리오 허브처럼 더 다듬어갈 생각입니다.
결국 포트폴리오는 결과물을 나열하는 공간이 아니라,
내가 어떤 사람인지 더 빠르게 이해시키는 화면이어야 한다고 생각합니다.
보여주는 방식까지 설계하는 것도 결국 개발자의 실력이라고 믿습니다.
🔗 직접 보기
- GitHub Pages: https://lova-clover.github.io/
- GitHub Profile: https://github.com/Lova-clover
혹시 보시면서 인상적이었던 부분이나 아쉬웠던 점이 있다면 편하게 남겨주세요.
다음에 더 다듬는 데 큰 도움이 될 것 같습니다.
2026-06-08 기준 추가 개선 기록
처음 개편했을 때는 “나를 설명하는 흐름”을 만드는 데 집중했다면, 이번에는 실제 포트폴리오로서의 가시성, 역할 전달력, 프로젝트 검증 구조를 더 다듬었습니다.
가장 크게 바꾼 부분은 프로젝트 섹션입니다.
기존에는 프로젝트가 세로로 길게 나열되어 한눈에 비교하기 어려웠지만, 이번에는 대표 프로젝트를 카드형 갤러리로 정리하고, 각 프로젝트를 클릭하면 이미지, 역할, 문제 정의, 구현 과정, 결과와 회고를 함께 볼 수 있도록 바꿨습니다.
특히 팀 프로젝트는 단순히 “참여했다”가 아니라, 제가 어떤 파트를 맡았고 어떤 흐름을 직접 구현했는지 보이도록 My Role과 Team Role을 따로 정리했습니다.
프로젝트마다 Problem → Build → Result 구조를 넣어, 결과물만 보여주는 것이 아니라 문제를 어떻게 정의하고 구현으로 연결했는지도 함께 보여주고자 했습니다.
이번 수정에서 신경 쓴 부분은 다음과 같습니다.
- 대표 프로젝트 8개를 Main 섹션으로 정리
- 전체 프로젝트는 All 탭과 History & Records에서 확인 가능하도록 구성
- 프로젝트별 이미지 슬라이드와 상세 모달 추가
- 개인/팀 프로젝트별 My Role, Team Role 정리
- GitHub, Velog, Email 연결 강화
- Core Stack과 GitHub 프로필 기술 스택 정합성 개선
- 모바일과 데스크톱 반응형 개선
- README와 assets 정리 후 GitHub Pages에 반영
이번 수정의 방향은 단순히 “더 예쁜 페이지”를 만드는 것이 아니라, 처음 보는 사람이 더 빨리 이해할 수 있는 페이지를 만드는 것이었습니다.
포트폴리오는 결과물을 모아두는 공간이기도 하지만, 결국 제가 어떤 방식으로 문제를 보고, 만들고, 기록하고, 다시 개선하는 사람인지 보여주는 공간이라고 생각합니다.
2026-06-08 기준으로 프로젝트 카드, 상세 모달, My Role, History & Records를 반영해 다시 정리한 github.io 전체 화면입니다.
2026-09-24 추가 개선 기록
지난 개편 이후 프로젝트와 대회 기록이 더 쌓여 포트폴리오를 다시 정리했습니다.
오리 캐릭터와 크림·아이보리 색감은 유지했습니다. 대신 프로젝트가 많아져도 처음 방문한 사람이 대표 작업을 빠르게 살펴보고, 관심 있는 프로젝트는 조금 더 자세히 확인할 수 있도록 구성과 내용을 다듬었습니다.
먼저 대표 프로젝트를 다시 선정했습니다.
Main에는 겹봄, 첫자리, LossTwin AI, PerfactoAI & CPR, MediClear, 찍먹AI, AnemiaDetection, FreshGuard를 배치했습니다. 문제를 서비스로 풀어낸 경험과 AI·데이터 처리, 백엔드, 컴퓨터비전 경험이 함께 드러나도록 순서를 정했습니다.
화면이 넓어 프로젝트가 한 줄에 5개씩 배치될 때는 K-MOMENTO AI와 DevHistory까지 보여주도록 했습니다. CheckmateAI, Afterimage Runner, RepoDNA, SiteGuard도 추가해 전체 프로젝트는 23개가 됐으며, All 탭에서 확인할 수 있습니다.
프로젝트 설명은 실제 코드와 README, 제출 자료를 대조하며 정리했습니다. 개인 프로젝트와 팀 프로젝트의 역할을 구분하고, 확인되지 않은 기술이나 성과를 설명에 덧붙이지 않도록 점검했습니다. 이미지도 가능한 한 실제 서비스 화면과 구현 결과를 사용했습니다.
수상과 본선 기록도 구분했습니다.
수상 내역은 History & Records에, 본선 진출과 발표 경험은 Finalist & Selected에 정리했습니다. 본선 기록은 작은 카드로 구성해 부피를 줄였고, 날짜는 실제 발표나 결과가 나온 달을 기준으로 YYYY.MM 형식에 맞췄습니다.
기술 스택은 사용한 역할에 따라 세 그룹으로 나눴습니다.
기존에는 Core Stack 한 줄에 기술을 나열했지만, 이번에는 다음과 같이 정리했습니다.
- AI / Data — 데이터 처리부터 모델 학습·검증까지
- LLM / Retrieval — 검색·근거 구성부터 생성 결과 정제까지
- Backend / Product — API·데이터베이스부터 서비스 운영까지
각 카드에는 짧은 설명과 기술 태그를 배치했습니다. 처음에는 카테고리 아이콘도 넣었지만, 제목만으로 구분이 충분해 최종적으로 제거했습니다. 기술 태그 안의 아이콘은 유지하고 여백을 줄이니 내용이 더 잘 읽혔습니다.
화면에서 잘 드러나지 않는 부분도 함께 손봤습니다. 이미지 용량과 로딩 방식을 조정하고, 검색·공유용 메타 태그와 오리 favicon, sitemap, 404 페이지를 정리했습니다. README와 외부 자산의 라이선스 안내도 보완했습니다.
마지막으로 모바일과 데스크톱, 라이트·다크 모드에서 카드와 프로젝트 상세 화면을 확인했습니다. 작은 화면의 줄바꿈과 가로 넘침, 이미지 표시, 콘솔 오류를 점검하고 정적 검사와 빌드를 거쳐 반영했습니다.
프로젝트가 늘어날수록 무엇을 추가할지뿐 아니라 무엇을 먼저 보여주고, 어디까지 설명할지 결정하는 일도 중요해졌습니다. 앞으로도 새 작업을 쌓으면서, 지금의 관심사와 직접 구현한 내용이 잘 전달되도록 포트폴리오를 함께 정리해 나가려고 합니다.
