포트폴리오에서 제일 어려웠던 건 무엇을 넣을지 정하는 일이었다
디자인을 고르는 일부터 소개·기술 목록·프로젝트를 한 화면에 배치하는 일까지. 지금 포트폴리오 화면을 놓고 구성을 돌아봅니다.
이 포트폴리오를 만들면서 가장 어려웠던 건 디자인 선택과 어떤 요소를 넣을지 정하는 일이었습니다. 소개도 필요하고, 할 줄 아는 기술도 보여 주고 싶고, 만든 프로젝트도 넣어야 합니다. 그런데 필요한 것을 전부 늘어놓는다고 읽기 좋은 페이지가 되지는 않습니다. 이 글에서는 지금 사이트에 남아 있는 화면을 보면서 그 구성을 돌아봅니다.
디자인의 출발점은 템플릿
이 사이트는 처음부터 모든 시각 요소를 새로 설계한 결과물은 아닙니다.DarkMinimal 템플릿을 기반으로 합니다. 어두운 배경, 보라색 강조, 둥근 카드 같은 시각적 틀을 사용하면서 소개와 프로젝트를 채운 구조입니다. 원본 디자인의 저작자 표시는 푸터와 저장소 LICENSE에 남겨 두었습니다.
틀이 있어도 해결되지 않는 부분이 있습니다. 제목을 얼마나 크게 쓸지보다, 그 제목 옆에 어떤 설명을 붙일지가 더 어렵습니다. 기술 아이콘 하나를 넣는 작업은 짧지만, 그 아이콘이 이 사람을 이해하는 데 얼마나 도움이 되는지는 코드만 보고 결정하기 어렵습니다.
첫 화면에는 ‘무엇을 공부하는 사람인지’가 있다
가장 큰 글자는 ‘개발자’입니다. 그 옆에는 프론트엔드·임베디드 시스템·데이터베이스를 공부하고 있고, 그중 프론트엔드에 가장 흥미가 있다는 설명이 붙어 있습니다. GitHub, 이메일, Discord 링크도 바로 아래에 있습니다.
이 화면에서 방문자가 알 수 있는 것은 관심 분야와 연락 방법입니다. 반대로 실제로 무엇을 만들었는지는 더 내려가야 보입니다. 소개를 먼저 보여 주는 구성이지만, 작업물을 보러 온 사람에게는 프로젝트까지의 거리가 생깁니다. 그래서 상단 메뉴의 ‘프로젝트’는 장식용 항목이 아니라 소개를 건너뛸 수 있는 경로이기도 합니다.
자기소개 카드에는 나이와 코딩 공부 기간도 있습니다. 개인 포트폴리오의 배경을 전하는 정보이지만, 이것만으로 구현 능력을 설명할 수는 없습니다. 프로젝트보다 숫자가 더 강하게 보이지 않는지, 화면을 고칠 때 계속 비교할 부분입니다.
기술 목록과 움직이는 효과가 차지하는 자리
소개 다음에는 기술 목록과 글자가 바뀌는 효과가 나옵니다. 정적인 문장만 있는 화면보다는 움직임이 생기지만, 여기까지 스크롤해도 프로젝트는 아직 나오지 않습니다. 데스크톱에서는 기술 목록과 효과가 나란히 놓이고, 모바일에서는 세로로 쌓여 이 구간이 더 길어집니다.
기술 아이콘은 ‘어떤 기술을 접했는가’를 빠르게 훑는 데에는 도움이 됩니다. 다만 아이콘만으로 어디에 어떻게 썼는지는 알 수 없습니다. Python 아이콘보다 방화벽 프로젝트의 코드가, 프론트엔드라는 단어보다 실제 웹 화면이 더 많은 설명을 해 주는 부분도 있습니다. 기술 목록을 길게 만드는 것과 설명이 충실해지는 것을 같은 일로 보지 않으려 합니다.
프로젝트 카드는 같은 모양인데, 담긴 정보는 다르다
현재 목록에는 섯다, 방화벽 프로젝트, 날씨 친구, 액자형 공기청정기가 있습니다. 웹 게임부터 하드웨어까지 성격이 달라서 같은 항목만으로 설명하기 어렵습니다. 섯다는 실시간 멀티플레이 같은 기능이 중요하고, 공기청정기는 실제 형태와 제작물이 더 궁금해집니다.
섯다 카드에는 스크린샷이 있지만 다른 카드는 이모지를 사용합니다. 모양은 맞출 수 있어도 이모지는 결과물을 보여 주지 못합니다. 특히 공기청정기는 외형이 설명의 일부인데, 현재 카드만으로는 어떤 물건을 만들었는지 알기 어렵습니다. 이 부분은 글을 길게 쓰는 것보다 실제 제작 사진 한 장을 확보하는 것이 먼저입니다.
공개 저장소가 없는 프로젝트에는 이제 ‘공개 저장소 없음’이라는 문구가 표시됩니다. 누를 수 있는 GitHub 모양 버튼을 두고 준비 중이라는 메시지를 보여 주기보다는, 지금 확인할 수 있는 자료가 무엇인지 바로 알리는 편이 낫다고 판단해 바꾼 부분입니다. 배포 링크도 실제 주소가 있는 프로젝트에만 둡니다.
넣을 요소를 고르는 기준도 조금 달라졌다
지금 화면을 놓고 보면 요소마다 답하는 질문이 다릅니다. 소개는 ‘어떤 사람인지’, 프로젝트는 ‘무엇을 만들었는지’, 연락처는 ‘어떻게 연락하는지’에 답합니다. 개발 노트는 여기에서 카드만으로 전달하기 어려운 코드와 수정 이유를 맡습니다.
새 요소를 넣을 때에는 이 중 어떤 설명이 더 생기는지 먼저 보려고 합니다. 특히 프로젝트 카드에 기능 이름을 하나 더 적는 것과, 그 기능이 보이는 화면을 붙이는 것은 같은 양의 정보가 아닙니다. 지금 사이트에서 더 필요한 것도 장식이나 기술 로고보다는 프로젝트의 실제 모습과 구체적인 설명에 가깝습니다.
디자인 선택이 어렵다는 고민이 한 번의 개편으로 끝난 것은 아닙니다. 소개를 앞에 둘지, 프로젝트를 더 빨리 보여 줄지처럼 서로 자리를 나눠야 하는 부분은 남아 있습니다. 다만 현재 화면을 캡처해 놓고 보니, ‘뭘 더 넣을까’뿐 아니라 ‘이미 넣은 것이 어떤 정보를 주고 있나’를 같이 물어볼 수 있게 됐습니다.