"신뢰를 디자인하고, 안전을 설계합니다."

공익 기관의 투명한 운영을 뒷받침하는 디지털 플랫폼을 구축했으며, 사용자 접근성과 보안을 최우선으로 고려했습니다.

📍 프로젝트 개요

• 기간: 2025년 12월 ~ 2026년 01월 (예시)
• 주요 역할: 웹 프론트엔드 설계 및 구축, 반응형 UI/UX 구현, Firebase 인프라 연동
• 한 줄 요약: 공익 기관의 정체성을 시각화하고, 누구나 신뢰할 수 있는 투명한 정보 전달 시스템을 개발함.

웹사이트 구축 목적

공익 기관의 투명한 운영을 시민에게 알리고, 청소년들에게는 활동 참여의 창구를 제공하는 '디지털 소통 허브'를 만드는 것이 이번 프로젝트의 목표였습니다. 단순히 홈페이지를 만드는 것에 그치지 않고, 기관의 정체성을 시각화해 방문자에게 신뢰감을 주는 데 집중했습니다.

이 함수는 데이터를 받아 자동으로 리스트를 만드는 핵심 로직입니다. 데이터 관리 효율성을 높이기 위해 설계되었습니다.

function renderGallery() {
    const container = document.getElementById('gallery-grid');
    const loadMoreBtn = document.getElementById('loadMoreBtn');
    
    activityData.sort((a, b) => {
        return new Date(b.sortDate) - new Date(a.sortDate);
    });

    const nextBatch = activityData.slice(currentIndex, currentIndex + itemsPerLoad);

    nextBatch.forEach(item => {
        let subImagesHTML = '';
        item.subImgs.forEach(img => {
            subImagesHTML += `<img src="${img}" alt="추가 사진">`;
        });

        let tagsHTML = '';
        item.tags.forEach(tag => {
            tagsHTML += `<span>${tag}</span>`;
        });

        const cardHTML = `
            <div class="project-card">
                <div class="gallery-container">
                    <div class="main-view">
                        <img src="${item.mainImg}" alt="${item.title}">
                    </div>
                    <div class="hidden-views">
                        ${subImagesHTML}
                    </div>
                </div>
                <div class="project-info">
                    <h3 class="project-title" style="color:#2c5f2d;">${item.title}</h3>
                    <div class="project-meta">
                        <span><strong>일시:</strong> ${item.date}</span>
                        <span><strong>장소:</strong> ${item.location}</span>
                    </div>
                    <p class="project-desc">${item.desc}</p>
                    <div class="project-tags">
                        ${tagsHTML}
                    </div>
                </div>
            </div>
        `;
        container.insertAdjacentHTML('beforeend', cardHTML);
    });

    currentIndex += nextBatch.length;

    if (currentIndex >= activityData.length) {
        loadMoreBtn.style.display = 'none';
    }
}

💡 핵심 역량 (Identity)

• Problem Solver: 요구사항을 명확히 정의하고, 기술적 제약을 극복하여 완성된 결과물 도출.
• Fast Learner: 프로젝트 환경에 빠르게 적응하며 효율적인 개발 흐름을 주도함.
• User-Centric Developer: 사용자의 정보 탐색 과정을 연구하여 직관적인 UX 설계.

🚀 기술적 성취 (Technical Highlights)

1. 사용자 경험(UX) 기반의 반응형 설계

• 내용: 다양한 디바이스 환경을 고려하여 1300px 기준의 레이아웃과 1100px 미만의 모바일 최적화를 구현.
• 성과: 어떤 환경에서도 정보의 손실 없는 일관된 사용자 경험 제공.

2. 데이터 기반 활동 기록 자동화