[JS] 자바스크립트를 활용한 '만 나이 계산기'

728x90

오늘은 '만 나이 계산기'를 직접 개발한 경험을 공유하려고 한다. 이 계산기는 사용자가 입력한 출생일과 기준일을 바탕으로 만 나이를 정확히 계산해주는 웹 애플리케이션이다. 또한, 사용자가 태어난 띠를 함께 확인할 수 있는 기능도 제공한다.

본 프로젝트는 JavaScript, HTML, CSS를 사용하여 구현되었으며, 각 기술의 특징을 활용하여 웹 애플리케이션을 구성했다. 따라서, 해당 프로젝트의 개발 과정과 기술적 구현을 상세히 설명하려 한다.

'만 나이 계산기' - 만나계 개발일지

위 사진은 우리나라 인기 가수이자 배우인 차은우씨의 생일을 넣어 구현한 모습이다. '만나계'는 사용자가 입력한 출생일과 기준일을 바탕으로 만 나이와 연 나이를 계산하고, 태어난 띠까지 알려주는 유용한 도구다. 포스팅 맨 아래에 게재했으니 여러분도 누구나 글 아랫부분에서 만 나이를 확인할 수 있다.

만 나이와 연 나이는 계산 방식에 있어 중요한 차이가 있기 때문에, 이 앱을 통해 그 차이를 명확히 알 수 있다. 만나계는 다음과 같은 기능을 제공한다.

만 나이 계산: 실제 태어난 날짜를 기준으로 만 1년 단위로 나이를 계산한다.
연 나이 계산: 기준 연도와 출생 연도의 차이를 계산하여 연 나이를 구한다.
띠 계산: 사용자가 입력한 출생일에 따라 띠를 계산해주며, 이 띠는 입춘을 기준으로 결정된다.

이 앱은 사용자에게 정확한 나이를 계산해주는 한편, 띠에 대한 흥미로운 정보도 함께 제공한다. 결과적으로 실용적이면서도 흥미로운 경험을 선사하는 애플리케이션이다.

주요 기능 및 구현 과정

이 프로젝트에서 구현한 주요 기능들을 하나씩 살펴보겠다. 이를 통해 각 기능을 어떻게 구현했는지, 그리고 그 과정에서 사용한 기술들을 알 수 있다.

출생일과 기준일 입력

사용자로부터 출생일과 기준일을 입력받는 기능은 직관적으로 구현되었다. '<input type="date">' 태그를 사용하여 날짜를 입력받고, 버튼 클릭 시 해당 데이터를 처리하는 로직을 구현했다.

<label for="birthdate">출생일을 입력하세요:</label>
<input type="date" id="birthdate">

<label for="reference-date">기준일을 입력하세요:</label>
<input type="date" id="reference-date">

<button id="calculate" onclick="calculateAge()">만 나이 계산</button>
<button id="reset" onclick="resetFields()">초기화</button>

만 나이 계산

만 나이는 기준일과 출생일을 비교하여 계산된다. 만약 기준일이 출생일보다 이전이라면 나이를 하나 빼야 한다. 이를 조건문을 통해 처리했다. 'JavaScript'의 'Date 객체'를 사용하여 출생일과 기준일을 비교하고, 그 차이를 기반으로 나이를 구하는 방식으로 구현했다.

let age = today.getFullYear() - birthDateObj.getFullYear();
const month = today.getMonth() - birthDateObj.getMonth();
if (month < 0 || (month === 0 && today.getDate() < birthDateObj.getDate())) {
    age--;
}

띠 계산

띠는 주기적인 성질을 가진 동물 띠이므로, 사용자의 출생 연도를 기준으로 12년 주기로 돌아간다. 하지만 띠는 입춘을 기준으로 결정되므로, 입춘일 이전에 태어난 사람은 그 해의 띠가 아니라, 전 해의 띠를 갖게 된다. 이를 통해 띠를 정확히 계산하는 방법을 구현했다.

let zodiacSign;
if (birthDateObj < springFestival) {
    const zodiacYear = (birthDateObj.getFullYear() - 4) % 12;
    zodiacSign = zodiacAnimals[(zodiacYear - 1 + 12) % 12];
} else {
    const zodiacYear = (birthDateObj.getFullYear() - 4) % 12;
    zodiacSign = zodiacAnimals[zodiacYear];
}

결과 출력

사용자가 입력한 출생일, 기준일, 계산된 만 나이, 연 나이, 띠를 웹 페이지에 출력하는 부분은 HTML 요소를 동적으로 업데이트하여 구현했다. 이를 위해 'innerHTML'을 사용하여 결과를 실시간으로 표시하였으며, 띠는 'strong' 태그를 사용하여 강조해봤다.

document.getElementById("result").innerHTML = `
    <p><span>출생일:</span><span>${birthdate}</span></p>
    <p><span>기준일:</span><span>${referenceDate}</span></p>
    <p><span>만 나이로:</span><span>${age}세</span></p>
    <p><span>연 나이로:</span><span>${yearAge}세</span></p>
    <p><span>띠:</span><span><strong>${zodiacSign}</strong></span></p>
`;

CSS 스타일링

이 프로젝트의 디자인은 사용자의 시각적인 편의성을 고려하여 깔끔하고 직관적으로 구성하려 노력했다. 특히 결과값은 각 항목별로 출생일, 기준일, 만 나이, 연 나이, 띠가 보기 좋게 정렬되도록 했으며, 각 항목에는 '굵은 글씨체(bold)'를 적용하여 강조한 게 특징이다.

.result p {
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
}
.result span {
    font-weight: bold;
}

프로젝트 테스트 및 검증

만 나이 계산기

출생일을 입력하세요: 기준일을 입력하세요:

프로젝트 개발을 마친 후, 기능 테스트를 진행했다. 출생일과 기준일을 다양한 날짜로 설정하고, 만 나이와 연 나이가 정확히 계산되는지 확인했다. 띠 계산 역시 입춘일을 기준으로 정확히 작동하는지 검토했다. 이 과정에서 모든 기능이 의도한 대로 정상적으로 동작함을 확인했다.

개선할 점

이 프로젝트를 진행하면서 발견한 개선할 점은 입력값 유효성 검사다. 현재는 사용자가 잘못된 날짜 형식을 입력하거나 출생일이 기준일보다 늦은 경우에 대한 예외 처리가 부족하다. 이러한 문제를 해결하기 위해, 추가적인 유효성 검사를 구현하면 더 완성도 높은 애플리케이션이 될 것으로 예상된다.

마치며,

이번 만나계 프로젝트를 통해 JavaScript와 HTML, CSS를 사용하여 실용적인 웹 애플리케이션을 구축했다. 이 프로젝트에서는 사용자에게 유용한 정보를 제공하면서도 흥미로운 띠 계산 기능을 추가하여 재미있는 요소도 함께 구현할 수 있었다.

개발 과정을 통해 많은 것을 배웠으며, 앞으로도 지속적으로 기능을 추가하고 개선할 계획이다. 이를 바탕으로 더 복잡한 웹 애플리케이션 개발에 도전할 예정이다.