메인 히어로 섹션 - 타이핑 애니메이션 구현기
포트폴리오의 첫 인상, 히어로 영역
개발자가 봤을 때 매력적일 수 있도록 VS코드 감성을 녹인 포트폴리오 페이지를 만들기로 했다.
해서, 페이지의 첫 인상인 히어로 영역에타이핑 애니메이션을 구현했다.
🎯 구현 목표
- 첫 진입 시, 자동으로 텍스트가 순차적으로 타이핑되도록
- 형광색 커서가 깜박이며 실제 코드 에디터 같은 느낌을 줄 것
- 3줄 메시지를 순서대로 나타나게 하여 "나를 소개"하는 효과
- 텍스트 스타일과 배경 모두 개발자 감성으로 통일
🎨 CSS 스타일링
#typing-title {
font-family: 'PF Stardust ExtraBold', sans-serif;
font-size: 5rem;
color: #C7FF3D;
white-space: pre;
overflow: hidden;
}
#typing-line1, #typing-line2 {
font-family: 'PF Stardust', sans-serif;
color: #C7FF3D;
font-size: 1.5rem;
white-space: pre;
}
.cursor {
display: inline-block;
animation: blink 1s step-end infinite;
color: #caff68;
}- 커서가 깜박이는 애니메이션을 주기 위해
@keyframes blink사용 white-space: pre로 줄바꿈과 공백 유지- 폰트는 레트로스럽고 개발자 에디터 감성인 Stardust 계열 사용
특히,
white-space: pre는 의외로 타이핑 연출의 필수요소였다.
1. 줄을 나누는 효과를 만들 때,\n또는 줄바꿈을 인식시켜야 했고,
2. 커서 오른쪽에 여백이 들어갈 때, 브라우저가 그 공백을 없애지 않아야 했기 때문.
(에디터처럼 보이려면 공백과 줄바꿈이 보이는 게 자연스럽다)
폰트 선택에 있어서도 예상 외로 많은 시행착오가 있었다.
처음에는 실제 개발자들이 많이 사용하는 네이버 D2Coding이나 JetBrains Mono 같은 폰트를 적용해봤다.
그러나 이들 폰트는 한글과 영문 조합에서의 시각적 밸런스가 부족했고, 특히<잔나비>처럼 한글을 강조해야 할 때는 디자인 톤이 깨지는 느낌이 강했다.
여러 레트로 폰트를 테스트한 끝에, 최종적으로 개성 있으면서도 에드터 느낌을 줄 수 있는 'Stardust'계열 폰트를 선택하게 되었다.
🧠 JavaScript 구현 (jQuery 사용)
function typeTextBySpan(spanId, text, delay, callback) {
const textEl = document.getElementById(spanId);
textEl.textContent = '';
const cursor = document.createElement('span');
cursor.className = 'cursor';
cursor.textContent = '|';
textEl.appendChild(cursor);
let i = 0;
const timer = setInterval(() => {
cursor.insertAdjacentText("beforebegin", text.charAt(i));
i++;
if (i >= text.length) {
clearInterval(timer);
if (callback) callback();
}
}, delay);
}
// 순차 타이핑 실행
typeTextBySpan("typing-title", "<잔나비>", 250, () => {
typeTextBySpan("typing-line1", "// 기획부터 인터렉션까지 -", 100, () => {
typeTextBySpan("typing-line2", "// 홍보&기획 7년 기반의 - 프론트엔드 개발자", 100);
});
});- 타이핑은 한 글자씩 삽입되며
setInterval로 딜레이 제어 - 콜백 함수로 줄 단위 순차 실행
- 마지막 줄까지 완성되면 히어로 영역 텍스트 노출 완료!
이 방식은 document.createElement로 커서를 직접 DOM에 삽입하고,
insertAdjacentText()로 커서 앞에 글자를 하나씩 밀어 넣는 구조라 꽤 직관적이면서도 깔끔한 연출이 가능하다.
이 방법을 구현하기까지 커서가 줄바꿈이 안되거나,
3개 커서가 동시에 보이거나,
커서가 커서답지 않게 굴거나....
시간을 갈아넣으며 디버깅했다 ㅠㅠ
처음에는 jQuery 문법으로 좀 더 간단하게 쓸까도 고민했지만,
향후 텍스트 동적 변경이나 다국어 대응 등을 고려해 바닐라 JS로 구성했다.
꿈만 크다... 하지만 구현 했으니까 된 거지 뭐 ㅋㅋ큐ㅠㅠ
💡 의도했던 감성
히어로 영역은 방문자가 가장 먼저 보는 부분이다.
나는 이 공간을 단순 소개가 아닌,
"브랜드 슬로건 같은 개발자 메시지"로 연출하고 싶었다.
그래서 그래서 텍스트는 단순히 'About me'가 아닌
<, >, // 등의 코딩 문법을 활용해
<잔나비>
// 기획부터 인터랙션까지 -
// 홍보&기획 7년 기반의 - 프론트엔드 개발자처럼, 나만의 정체성을 드러낼 수 있는 문구로 구성했다.
🎈마무리하며
히어로 영역을 만들면서 가장 많이 고민한 건,
나를 표현하는 대표소갯글을 과하지 않으면서도 확실하게 강조하는 것이었다.
VS코드 와 개발자감성을 고려해 타이핑 애니메이션 이라는 방식을 선택했고,
이를 구현하며 마주친 끊임없는 시행착오로 나의 한계를 뚜렷이 경험했다 ㅠㅠ
하지만 어떻게든 된다 ! 란 ㅋㅋ 성취감도 동시에 얻을 수 있었고,
결과적으로 이 영역은, 내 포트폴리오에서 가장 뿌듯한 결과물 중 하나가 되었다.
물론.. 아직 프론트엔드 '개발자'라는 정체성이
나를 표현하는 단어가 될 수 있을지에 대해서는 잘 모르겠다.자신감 부족..쭈글쭈글
나는 과연 프론트엔드 개발자인가?
아니면 UX·UI 디자이너, 웹기획자인가? 마케터인가?
이런 질문은 앞으로도 계속될 것이다.
하지만 이 고민이, 성장을 이끄는 나침반이 되어줄 것이라 믿는다.
