Take Knowledge Landing

개발 지식을 도구로, 제품과 서비스의 가치를 만드는 Take Knowledge 의 포트폴리오 랜딩 페이지입니다.

페이지 구성

• index.html: 포트폴리오, 경력·기술 스택, 연락처 섹션을 유지한 메인 페이지입니다. 포트폴리오는 데스크톱 2개·모바일 1개씩 좌우 화살표로 넘기는 가로 캐러셀입니다. 스와이프와 좌우 방향키도 지원하며, 전환 시 세로 스크롤 위치를 유지합니다. 움직임 줄이기 설정에서는 즉시 전환합니다.
• portfolio.html: Web, App, Game, Lecture 전체 작업을 검색하고 분류별로 볼 수 있는 독립 포트폴리오 페이지입니다.
• career.html: 기존 프로젝트 경력과 기술 스택을 자세히 소개합니다. 데이터는 메인과 공유합니다.
• contact.html: 이메일 연락처, 프로젝트 문의 안내, GitHub·YouTube·Velog·Brunch·Instagram(@dev.takeknowledge) 채널을 소개합니다. 인스타그램은 메인 소개 하단의 소셜 링크에도 표시합니다.
• project.html?id=작업ID: Web 7개, App 5개, Game 4개, Lecture 1개 모두의 소개와 주요 기능, 실제 이용 링크를 제공합니다. 실행 버튼 옆에 카카오페이 후원 버튼을 배치하고 토스 앱에만 QR을 안내합니다. ‘Beacon Port’는 항목별로 이력서를 작성하고 공개 URL로 공유하는 온라인 이력서 서비스이며 ‘이력서 작성’, ‘이력서 공유’, ‘개발자 이력서’로도 검색됩니다. ‘축의금 장부’는 결혼식 하객·축의금 접수와 현금 합계를 관리하는 웹 장부이며 ‘축의금 정리’, ‘하객 명단’, ‘결혼식 장부’로도 검색됩니다. ‘턱걸이 한개만’은 첫 풀업을 위한 운동 기록·가이드·커뮤니티 웹 서비스이며 ‘풀업’, ‘철봉’, ‘매달리기’, ‘운동 기록’으로도 검색할 수 있습니다. ‘월급루팡 최과장’은 사무실 생존 아케이드 게임이며 ‘킬링타임’, ‘직장인 게임’, ‘피하기 게임’으로도 검색됩니다. ‘퇴근전쟁 최과장’은 주차별 퇴근에 도전하는 타이밍 생존 게임이며 ‘칼퇴’, ‘타이밍 게임’, ‘신호등 게임’으로도 검색됩니다. ‘승진전쟁 최과장’은 업무 장애물을 피해 층을 돌파하는 오피스 클라이머이며 ‘사다리 게임’, ‘점프 게임’, ‘승진’으로도 검색됩니다. ‘탈주닌자 최과장’은 점프·슬라이드로 장애물을 피하며 이직과 연봉 인상에 도전하는 레트로 러너이며 ‘닌자 게임’, ‘러너 게임’, ‘연봉 올리기’로도 검색됩니다. 게임에는 PLAY GAME·게임 플레이 버튼과 각 게임 화면의 조작 안내를 확인하라는 설명을 표시합니다.

기존 apps.html은 통합 포트폴리오로, app.html?id=앱ID는 공통 상세 페이지로 이동합니다. 별도 앱 전용 검색 화면은 없으며 기존 주소의 검색 조건도 전달합니다.

상단 메뉴는 공통 site.js에서 Main / Portfolio / Career / Contact로 관리하며 Main 메뉴와 로고는 메인으로 연결합니다. 메인의 각 섹션에서도 독립 페이지로 이동할 수 있습니다.

포트폴리오 검색

• 작업 이름, 설명, 주요 기능, 태그, 플랫폼과 작업별 searchKeywords를 검색합니다. ‘포스트잇 출력’, ‘운동 습관’, ‘사진 속 큐알 읽기’, ‘축구 판정’, ‘코딩 입문’처럼 필요한 일로도 찾을 수 있습니다.
• portfolio-data.js의 searchSynonyms에서 인쇄/출력/프린트, QR/큐알, 입문/초보/기초 등의 관련어를 연결합니다. AI, 임베딩, 외부 검색 API 없이 브라우저 안에서만 처리합니다. 등록한 단어 범위의 검색이며 임의의 문장 의미를 추론하지 않습니다.
• 대소문자, 구두점, 데이터의 띄어쓰기를 정규화하고 한국어 조사와 ‘하고 싶어요’, ‘추천해줘’ 같은 검색 보조 표현을 처리합니다. 의미 있는 검색어는 모두 맞아야 하며 제목·태그·관련어·기능·설명 순의 가중치로 관련도순 정렬합니다. 빈 검색어는 기존 작업 순서를 유지합니다.
• 검색창 아래 예시 버튼으로 기능 중심 검색을 시작할 수 있습니다. 예시를 선택하면 전체 분류에서 찾습니다.
• 검색어(q)와 분류(category)를 URL에 저장하며 상세 페이지에서 목록으로 돌아와도 유지합니다.
• 검색 결과 없음과 작업을 준비 중인 분류를 안내하며 전체 작업 보기로 검색과 분류를 초기화할 수 있습니다.
• 한글 분류명(웹, 앱, 강의)과 각 작업의 태그도 검색에 포함합니다.
• 잘못된 작업 ID에는 작업을 찾을 수 없다는 안내와 포트폴리오 링크를 표시합니다.

기능 연결

작업 정보는 portfolio-data.js에서 관리합니다. 모든 작업에 고유한 id, tags, features, 실행 링크와 이미지 경로를 지정하면 메인, 검색, 상세 페이지에 함께 반영됩니다. 토스 앱에는 appPlatform, appCategory, qrCodeUrl도 지정합니다. 검색과 상세 조회 모두 동일한 전체 portfolioItems를 사용합니다. 검색 로직은 searchPortfolio()로 분리되어 있어 이후 검색 데이터 소스를 바꾸기 쉽습니다. 경력과 기술 스택은 profile-data.js에서 관리하며 profile.js에서 렌더링합니다.

카카오페이 후원 연결은 siteConfig.donationHref에 실제 HTTPS 후원 URL을 넣으면 활성화됩니다. 작업별 링크가 필요하면 해당 항목에 donationHref를 지정합니다. URL이 없거나 유효하지 않으면 링크가 없는 준비 중 상태로 표시합니다. 결제 API나 결제 완료 처리는 아직 연결하지 않습니다. 상세 페이지의 연결 버튼은 project-detail-actions 영역, 동작은 project-detail.js에서 관리합니다.

개인 후원은 카카오페이 코드송금 받기에서 발급한 송금 링크를 버튼에 연결하는 방식으로 사용합니다. 이 방식에는 Client ID, Client Secret, Secret key, 결제용 CID 또는 결제 준비·승인 서버가 필요하지 않습니다. 발급받은 공개 송금 링크를 siteConfig.donationHref에 지정하면 됩니다. 공식 코드송금 받기 안내

후원은 소개 중인 작업과 관계없이 Take-Knowledge용으로 제공받은 공통 코드송금 링크(https://link.kakaopay.com/__/ffe10Qe)로 연결합니다. 송금 화면의 앱 표시는 카카오페이에서 발급한 링크에 따라 결정되므로 다른 앱의 링크를 재사용하지 않습니다. 링크 교체 시에는 Take-Knowledge에서 복사한 링크인지 확인하고, 미확인 상태에서는 donationHref를 null로 두어 후원 버튼을 비활성화합니다. 버튼을 누르면 새 창에서 송금 링크로 이동하며, 사이트에서 송금 완료 여부를 판정하지는 않습니다.

앞서 준비한 .env.local은 Git에서 제외되어 있으며 현재 정적 사이트에서 읽거나 배포하지 않습니다. 기존 로컬 인증정보는 수정하지 않아도 됩니다. 키 값을 채팅, 소스 코드, 로그에 넣지 않습니다.

빌드 및 로컬 확인

npm run build
node --test portfolio-search.test.mjs
python3 -m http.server 4173 --directory dist/client

브라우저에서 http://localhost:4173을 엽니다. ES 모듈을 사용하므로 HTML 파일을 직접 열지 않고 HTTP 서버로 확인합니다. 배포 결과물은 dist/client이며 새 HTML과 공용 JS 파일도 빌드에 포함됩니다.