IT 아카이브

[웹 프로그래밍 실습] 포트폴리오 웹 페이지 제작

cyberjung — Sun, 26 Apr 2026 18:54:32 +0900

핵심 기술 스택

HTML5
CSS3
Google Fonts: CDN으로 연결해 Playfair Display, Fira Code, Noto Sans KR 세 가지 폰트를 사용

웹 표준 기술인 HTML5와 CSS3만을 활용하여 가볍지만 강력한 시각 효과를 주는 데 집중했습니다.

프로젝트 개요

페이지는 크게 세 섹션으로 구성됩니다. 히어로 영역, 개인 프로젝트 섹션, 팀 프로젝트 섹션 입니다.

히어로 섹션

개인 프로젝트 섹션

팀 프로젝트 섹션

HTML 코드 구조 분석

<head> 영역

head 태그 안에는 네 가지 핵심 요소가 들어있습니다.

[ charset=UTF-8 ] 한글 등 다국어 문자를 깨짐 없이 표시합니다.

[ viewport 메타태그 ] 모바일 반응형 지원을 위한 필수 설정입니다.

[ title 태그 ] 브라우저 탭과 검색엔진 결과에 표시되는 페이지 제목입니다.

[ Google Fonts 링크 ] 외부 CDN에서 폰트 3종을 불러옵니다.

"head 태그는 화면에 보이지 않지만 사이트 동작의 기반을 잡아주는 중요한 영역입니다"

<nav> 내비게이션

nav 태그는 시맨틱 태그입니다.

내비게이션 영역임을 브라우저와 스크린리더에 의미적으로 전달합니다.

링크는 두 종류로 나뉩니다.

href="#about"처럼 샵(#)으로 시작하는 앵커 링크는 같은 페이지 내 특정 섹션으로 부드럽게 스크롤 이동시킵니다.

반면 GitHub나 Tistory 같은 외부 링크에는 target="_blank"를 추가해 새 탭으로 열리도록 하였습니다.

메뉴 항목은 ul과 li 태그의 목록 구조로 작성되어 있으며,

CSS에서 list-style: none으로 점을 제거하고 flex를 적용하여 가로 배치 되게 하였습니다.

<header> 히어로 섹션

페이지 최초 진입 시 전체 화면을 차지하는 소개 영역입니다.

이것이 header 태그로 구성된 히어로 섹션입니다.

header 태그에 id="about"을 지정하여 nav의 앵커 링크와연결하였습니다.

즉, 상단 메뉴에서 Home을 클릭하면 이 header 영역으로 스크롤됩니다.

br / 태그 사용해 강제 줄바꿈으로 제목을 두 줄로 분리하였습니다.

이름과 학번 부분은 span 태그로 감싸서 해당 부분에만 별도 폰트 스타일을 적용하였습니다.

span은 인라인 요소이므로 줄바꿈 없이 텍스트 안에 자연스럽게 삽입됩니다.

HTML특수문자엔티티인 ↓ 를 사용해 브라우저가 ↓ 기호로 렌더링합니다. CSS 애니메이션을 적용해 bounce 효과 적용됩니다.

버튼 두 개(GitHub, Tistory)에 대해 같은 btn 클래스를 공유하되

다중 클래스 패턴으로 btn-github와 btn-blog로 디자인을 구분하였습니다.

구분선 및 개인/팀 프로젝트 섹션

<section> 주제별로 묶인 독립적인 콘텐츠 영역을 나타내는 시맨틱 태그입니다.

헤딩 계층 h2→h3→h4

h2(헤더 제목) → h3(섹션 제목) → h4(프로젝트 제목) 순으로 논리적 계층을 유지합니다.

<strong> 단순히 굵게 보여주는 것 외에 의미적으로 중요한 텍스트임을 나타냅니다.

style="margin-top: 30px" 인라인 스타일로 두 번째 카드에 30px 상단 여백을 추가합니다.

일반적으로는 CSS 클래스 사용이 권장됩니다.

<ul class="project-spec-list"> 프로젝트 정보를 목록으로 구조화합니다.

개인 프로젝트와 팀 프로젝트 사이에는 hr 태그로 구분선을 넣었습니다.

기본 hr의 테두리는 CSS로 제거하고, 청록색 그라디언트 선으로 재디자인하였습니다.

팀 프로젝트 섹션도 개인 프로젝트와 동일한 카드 구조를 재사용하여 일관된 디자인을 유지하였습니다.

CSS 코드 구조 분석

CSS 변수 및 전역 초기화

root 블록에서 CSS 변수를 선언합니다.

예를 들어 --accent: #00ffcc로 포인트 컬러를 변수로 등록하면,

이후 전체 CSS에서 var(-accent)로 재사용할 수 있습니다. 나중에 포인트 색상을 바꾸고 싶을 때 이 한 줄만 수정하면 전체가 일괄 변경됩니다.

그 다음 * , 즉 전체 선택자로 margin과 padding을 0으로 초기화합니다.

브라우저마다 기본 여백이 달라 레이아웃이 틀어지는 것을 방지하는 CSS 리셋 기법입니다.

함께 설정된 box-sizing: border-box는 padding과 border를 요소의 전체 크기에 포함해 레이아웃 계산을 직관적으로 만들어줍니다.

body 배경 및 기본 스타일

body 스타일에서 가장 주목할 부분은 배경 처리 방식입니다.

background-image에 두 개의 레이어를 동시에 지정하였습니다.

첫 번째 레이어는 검정 반투명 그라디언트이고, 두 번째 레이어는 실제 배경 이미지입니다.

그라디언트가 이미지 위를 덮어 텍스트 가독성을 확보합니다.

background-attachment: fixed를 설정하여

스크롤해도 배경 이미지는 고정되고 콘텐츠만 움직이는 패럴랙스 효과를 구현하였습니다.

scroll-behavior: smooth를 적용하여 앵커 링크 클릭 시 즉시 이동 대신 부드러운 스크롤 애니메이션이 실행됩니다.

.container 및 nav 스타일

레이아웃의 핵심이 되는 컨테이너, 고정 내비게이션 바의 스타일입니다.

내비게이션 바에는 position: fixed를 적용해 스크롤해도 항상 화면 상단에 고정되도록 하였습니다.

z-index: 1000으로 다른 요소 위에 항상 표시됩니다.

backdrop-filter: blur(15px) nav 뒤의 콘텐츠를 15px 블러 처리해 유리 효과를 구현합니다.

메뉴 링크에는 transition: 0.3s와 hover 스타일을 함께 적용해, 마우스를 올리면 0.3초에 걸쳐 청록색으로 부드럽게 색이 바뀝니다.

header 히어로 섹션 스타일

전체 화면 높이의 소개 섹션과 반응형 제목 폰트, 텍스트 글로우 효과를 설정합니다.

header에 height: 100vh를 적용하여 화면 전체 높이를 차지하도록 하였습니다.

display: flex와 align-items, justify-content를 center로 설정해 내부 콘텐츠를 가로와 세로 모두 완전히 중앙에 배치하였습니다.

Clamp(2.5rem, 6.5vw, 5rem) 최소 2.5rem, 기준값 6.5vw, 최대 5rem으로

화면 크기에 따라 폰트 크기가 자동 조절되는 반응형 타이포그래피입니다.

text-shadow에는 두 겹의 글로우 효과를 쌓았습니다. 흰색 글로우로 가독성을 높이고, 청록색 글로우로 포인트 컬러와의 통일감을 주었습니다.

버튼 스타일

버튼은 두 가지 패턴으로 디자인하였습니다.

GitHub 버튼인 btn-github는 아웃라인 스타일로, 테두리만 있고 배경은 없습니다.

마우스를 hover 시 배경이 채워지며 텍스트 색이 검정으로 바뀝니다.

Tistory 버튼인 btn-blog는 솔리드 스타일로, 처음부터 청록색 배경이 채워져 있습니다.

hover 시에는 box-shadow로 네온 빛이 번지는 효과가 나타납니다.

border-radius를 2px로 설정하여 모서리가 거의 직각에 가깝게 설정하였습니다.

스크롤 화살표 애니메이션

스크롤 유도 화살표에는 @keyframes 애니메이션 (키프레임)을 적용하였습니다.

중앙 정렬 공식 position:absolute + left:50% + translateX(-50%) 조합으로 정확한 수평 중앙 배치를 구현합니다.

@keyframes bounce 0~100% 구간 중 40% 지점에서만 위로 10px 이동해 통통 튀는 효과를 만듭니다.

animation: 2s infinite 2초 주기로 무한 반복 재생됩니다.

프로젝트 카드 (.project-card)

카드 컴포넌트의 배경, 테두리, hover 인터랙션 및 내부 스펙 리스트 정렬을 정의합니다.

background: rgba(255,255,255,0.05) 5% 흰색 불투명도로 배경과 미묘하게 구분되는 반투명 카드 효과를 표현합니다.

border 불투명도 변화 평상시 20% 불투명도 → hover 시 100% 불투명도로 테두리가 선명해집니다.

translateY(-5px) + box-shadow 카드가 위로 5px 부상하며 하단 청록 그림자로 떠오른 느낌을 강화합니다.

반응형 디자인 (@media)

마지막으로 미디어 쿼리입니다.

@media (max-width: 768px) 조건으로 화면 너비가 768픽셀 이하일 때, 즉 태블릿이나 모바일 환경에서 별도 스타일이 적용됩니다.

@media (max-width: 768px) 화면 너비 768px 이하(태블릿/모바일)일 때 적용됩니다.

display: none 모바일에서 내비게이션 메뉴를 숨깁니다.

컨테이너 패딩 축소 패딩 축소, 폰트 크기 고정으로 모바일 레이아웃을 최적화합니다.

모바일 접속시 화면

HTML 핵심 개념

CSS 핵심 개념

결론

본 포트폴리오 웹사이트는 구조적인 측면에서는 nav, header, section 등 시맨틱 태그를 올바르게 사용하여 문서의 논리적 계층을 명확히 표현하였으며, 앵커 링크와 id 속성의 연계로 단일 페이지(SPA형) 내비게이션을 구현하였습니다.

디자인 측면에서는 CSS 변수를 활용한 중앙화된 테마 관리, Glassmorphism 기법의 내비게이션 바, 패럴랙스 배경 효과, clamp() 함수를 이용한 반응형 타이포그래피 등 최신 CSS 트렌드를 적극적으로 도입하였습니다. 또한 @keyframes 애니메이션, hover 인터랙션,

이중 레이어 box-shadow 등으로 JavaScript 없이도 풍부한 동적 효과를 구현한 점이 특징입니다.

텔넷 서버가 무엇인가?

cyberjung — Fri, 3 Apr 2026 18:03:39 +0900

요새는 텔넷 서버를 많이 사용하고 있지 않지만, 텔넷은 오랫동안 사용되어 온 접속 방법이다.

텔넷 서버를 사용하기 위해서는 리눅스 서버에 텔넷 서버 설치 O <-> 접속 할 PC에는 텔넷 클라이언트 프로그램 O

핵심 원리 : 데이터를 평문 으로 전송함.

작동 방식 : 주로 xinetd(슈퍼 데몬)에 의해 관리됨. 평소엔 죽어있다가 요청이 오면 슈퍼 데몬이 깨움.

왜 텔넷은 바로 안 뜨고 슈퍼 데몬을 거치는가? -> 자원 절약을 위해서임.

1. 텔넷(Telnet) 서버의 본질적 목적

텔넷은 "멀리 떨어져 있는 컴퓨터에 네트워크를 통해 접속하여, 마치 내 앞에 있는 컴퓨터처럼 조작하기 위해" 사용합니다.

원격 제어: 서버가 전산실에 있거나 멀리 떨어진 데이터 센터에 있을 때, 직접 가지 않고 내 책상에서 터미널(명령창)을 통해 명령어를 입력하고 결과를 확인하는 용도입니다.

2. "왜 하필 텔넷인가?"

사실 현대 실무에서는 보안 문제로 텔넷 대신 SSH(Secure Shell)를 씁니다. 그럼에도 불구하고 우리가 실습에서 텔넷을 배우고 구축하는 이유는 다음과 같습니다.

네트워크 서비스의 기본 구조 학습: '텔넷'은 가장 단순하고 전형적인 클라이언트-서버 모델입니다.
- '슈퍼 데몬'과의 연동 원리를 배우기에 가장 적합한 모델이기 때문입니다.
- * 슈퍼 데몬이란? 리눅스 서버에는 텔넷, FTP, SSH 등 수많은 서비스 O -> 하지만 이 모든 서비스를 항상 켜두면 다음과 같은 문제 발생
- 1. 메모리 낭비: 접속하는 사용자가 한 명도 없는데 서버 프로세스가 계속 메모리를 차지하고 있게 됩니다.
- 2. 성능 저하: 관리해야 할 프로세스가 너무 많아지면 시스템 전체가 무거워집니다
- 슈퍼 데몬은 이 문제를 '대리인' 방식으로 해결합니다.
디버깅 및 테스트 용도: 특정 포트가 열려 있는지 확인하거나, HTTP/SMTP 같은 다른 프로토콜이 정상 작동하는지 테스트할 때 텔넷 클라이언트를 도구로 사용합니다.
저사양/임베디드 환경: 암호화 연산 능력이 부족한 아주 오래된 장비나 초소형 기기에서는 SSH의 암호화 과정을 감당하지 못해 여전히 텔넷을 사용하기도 합니다.

"보안도 안 좋은 텔넷을 왜 굳이 깔아서 실습하나?"

"네트워크 서비스 관리의 메커니즘을 이해하기 위해서입니다."

자원 관리의 효율성: 모든 서비스가 웹 서버처럼 항상 켜져 있을 필요는 없습니다.
텔넷처럼 가끔 쓰이는 서비스를 슈퍼 데몬(xinetd)에 귀속시켜 관리함으로써 시스템 자원을 어떻게 효율적으로 배분하는지 배우기 위함입니다.

데이터 전송의 가시성: 텔넷은 패킷이 암호화되지 않기 때문에, 네트워크 분석 도구(WireShark 등)로 패킷을 뜯어봤을 때 명령어가 어떻게 오가는지 눈으로 직접 확인할 수 있어 학습 효과가 큽니다. (SSH는 암호화되어 있어 내부를 볼 수 없습니다.)

[MAC 환경] 이것이 리눅스다 라운드 로빈 네임 서버 공부하기

cyberjung — Mon, 30 Mar 2026 20:28:21 +0900

안녕하세요! 리눅스 서버 운영을 하다 보면 접속자가 몰려 서버가 느려지는 상황을 마주하게 됩니다. 오늘은 네임 서버(DNS)를 활용해 여러 대의 웹 서버로 접속을 분산시키는 '라운드 로빈 네임 서버'에 대해 알아보겠습니다.

1. 라운드 로빈 네임 서버란?

대형 웹 사이트처럼 사용자 접속이 엄청나게 많은 경우, 단 한 대의 웹 서버로는 모든 요청을 처리하기 부족합니다.

이때 동일한 서비스를 제공하는 웹 서버를 여러 대(예: 3대) 준비하고, 네임 서버가 IP 주소를 알려줄 때 순차적으로 돌아가며 알려주는 방식입니다.

작동 원리: 1. 첫 번째 사용자에게는 A 서버 IP 전달 2. 두 번째 사용자에게는 B 서버 IP 전달 3. 세 번째 사용자에게는 C 서버 IP 전달 4. 네 번째 사용자에게는 다시 A 서버 IP 전달
장점: 고가의 로드 밸런싱 장비 없이도 웹 서버의 부하를 효과적으로 분산시킬 수 있습니다.

2. 실습 준비: IP 주소 확보하기

현실적으로 웹 서버 3대를 모두 구축하기 어렵기 때문에, 이번 실습에서는 기존에 존재하는 유명 사이트의 IP 주소를 우리 웹 서버라고 가정하고 진행합니다.

실습 가상 머신: Server (네임 서버 역할)
대상 IP (가정): nslookup 명령어를 통해 네이트, 한빛미디어 등 3개 사이트의 IP 주소를 미리 메모해둡니다.

3. 네임 서버 설정 (Zone 파일 수정)

네임 서버가 하나의 도메인에 대해 여러 개의 IP를 응답하도록 설정 파일을 수정해야 합니다.

Zone 파일 열기: /var/named/thisislinux.com.db 파일을 편집합니다.
레코드 추가: 기존의 www 레코드를 아래와 같이 여러 개의 IP로 매핑합니다.

3. 서비스 재시작: 설정 적용을 위해 서비스를 재시작합니다.

4. 결과 확인 및 테스트

구축이 완료되었다면 클라이언트 PC에서 테스트를 진행합니다.

DNS 조회 확인: nslookup www.thisislinux.com 명령어를 입력하면 3개의 IP 주소가 한꺼번에 나타나는 것을 볼 수 있습니다.
웹 브라우저 접속: 클라이언트 가상 머신에서 브라우저를 열고 도메인에 접속해 봅니다. 브라우저를 완전히 닫았다가 다시 열어 접속하면, 네임 서버가 알려주는 IP 순서에 따라 서로 다른 사이트(실습상 가정된 사이트)가 나타나는 것을 확인할 수 있습니다.

[MAC 환경] 이것이 리눅스다 마스터 네임 서버 공부하기

cyberjung — Mon, 30 Mar 2026 19:15:08 +0900

지난 포스팅에서는 남의 주소를 대신 물어봐 주는 '캐싱 전용 네임 서버'를 알아봤는데요.

오늘은 한 단계 더 나아가, 내가 직접 도메인의 주인이 되어 하위 호스트들을 관리하는 '마스터 네임 서버'를 구축해 보겠습니다.

1. 마스터 네임 서버란?

마스터 네임 서버는 특정 도메인 영역(Zone)에 대한 모든 정보를 직접 가지고 있는 서버입니다.

캐싱 서버: "모르는데 잠시만요, 제가 물어봐 드릴게요." (중개인)
마스터 서버: "그 주소는 제 관리 구역입니다. IP는 이거예요!" (주인)

이 서버를 구축하면 www, ftp, mail 등 다양한 서브 도메인을 내가 원하는 IP로 연결할 수 있습니다.

2. 실습 환경 구성

이번 실습에서는 총 3~4대의 가상 머신을 사용합니다.

Server (100번): 마스터 네임 서버 및 웹 서버 역할
Server B (200번): FTP 서버 역할
Client (로키 리눅스/윈도우): 네임 서버가 정상 작동하는지 확인하는 클라이언트

3. 단계별 서버 구축 절차

단계 1: 웹 서버 및 FTP 서버 기초 설정

먼저 네임 서버가 가리킬 대상 서버들을 준비합니다.

웹 서버(Server): dnf install httpd로 설치 후 간단한 index.html 파일을 만듭니다. 방화벽에서 http, https 서비스를 허용해야 합니다.
FTP 서버(Server B): dnf install vsftpd로 설치합니다. 환영 메시지(welcome.msg)를 설정하여 접속 시 본인의 서버임을 확인할 수 있게 합니다.

다음으로 간단한 홈페이지 만들기

또 다른 리눅스인 server B를 열어 간단한 FTP 서버로 만들기

방화벽에서 FTP 허용

FTP 서버에 접속 된걸 확인 하기 위해 cd/var/ftp/ 한다음 nano를 열어 메세지 아무거나 적어주기

다음 메세지가 나오도록 수정

접속하면 화면에 아까 적은 내용을 출력하기 위에 아래와 같은 내용을 적어주고 저장 후 나간다

단계 2: 네임 서버 설정 (/etc/named.conf)

마스터 네임 서버의 심장부인 설정 파일을 수정합니다. 파일 맨 아래에 관리할 도메인 정보를 추가합니다.

단계 3: 존(Zone) 파일 생성 및 작성

실제 도메인 이름과 IP를 매칭하는 데이터베이스 파일을 /var/named/ 디렉토리에 생성합니다.

파일명: thisislinux.com.db
내용: SOA 레코드, NS 레코드 및 각 서비스(www, ftp)의 A 레코드를 입력합니다.
- www IN A 192.168.111.100
- ftp IN A 192.168.111.200

단계 4: 설정 검증 및 서비스 시작

설정에 오타가 없는지 검사하는 과정은 필수입니다.

named-checkconf: named.conf 파일 문법 검사
named-checkzone: 존 파일 문법 검사 검사 후 systemctl restart named로 서비스를 재시작합니다.

4. 결과 확인 (클라이언트 테스트)

이제 클라이언트 가상 머신에서 우리가 설정한 도메인으로 접속해 봅니다.

DNS 설정 변경: /etc/resolv.conf의 nameserver를 우리가 구축한 서버 IP(100번)로 변경합니다.
웹 접속: 브라우저에 www.thisislinux.com을 입력했을 때 로키 리눅스 웹 서버 페이지가 뜨면 성공!
FTP 접속: 터미널에서 ftp ftp.thisislinux.com 명령어로 접속하여 설정한 환영 메시지가 나오는지 확인합니다.

[Rocky Linux] 캐싱 전용 네임 서버(DNS) 개념 이해 및 구축하기

cyberjung — Mon, 30 Mar 2026 00:24:19 +0900

1. 캐싱 전용 네임 서버란?

캐싱 전용 네임 서버는 말 그대로 "자신이 직접 관리하는 도메인 영역은 없지만,

클라이언트의 요청을 대신 외부로 나가서 알아오고 그 결과를 캐시에 저장하는 서버" 입니다.

2. DNS 작동 원리

우리가 브라우저에 www.nate.com을 입력하면 다음과 같은 계층적 탐색이 일어납니다.

PC: 로컬 네임 서버에게 주소를 묻습니다.
로컬 네임 서버: 캐시에 없다면 루트(Root) 서버에게 묻습니다.
루트 서버: .com 서버의 주소를 알려줍니다.
.com 서버: nate.com 관리 서버의 주소를 알려줍니다.
nate.com 서버: 최종적으로 www 호스트의 IP 주소를 알려줍니다.
로컬 네임 서버: 이 주소를 PC에 전달하고 자신의 캐시에 저장합니다.

3. 캐싱 전용 네임 서버 구축 실습

환경 준비

OS: Rocky Linux
IP: 192.168.111.100 (서버 IP 예시)

Step 1. 패키지 설치

먼저 DNS 서비스를 제공하는 bind 패키지를 설치합니다.

Step 2. 설정 파일 수정 (/etc/named.conf)

서버가 외부 쿼리에 응답할 수 있도록 설정을 변경해야 합니다.

nona /etc/named.conf

다음 항목들을 수정합니다:

listen-on port 53 { any; }; : 53번 포트를 모든 IP에서 허용합니다.
allow-query { any; }; : 누구나 이 서버에 주소를 물어볼 수 있게 허용합니다.

Step 3. 서비스 실행 및 방화벽 오픈

설정을 마쳤다면 서비스를 시작하고 부팅 시 자동 실행되도록 설정합니다.

4. 클라이언트 설정 및 테스트

이제 다른 클라이언트가 우리가 만든 서버를 DNS로 사용하게 설정해 봅시다.

Linux 클라이언트: /etc/resolv.conf 파일 수정

작동 확인

터미널에서 nslookup 명령어를 통해 외부 도메인이 잘 조회되는지 확인합니다.

위와 같이 Server 항목에 우리가 구축한 서버 IP가 뜨고 결과값이 잘 나온다면 성공입니다!

OTP의 3가지 작동 방식: Java와 Python으로 직접 구현하기

cyberjung — Tue, 17 Mar 2026 11:53:08 +0900

1. OTP

오늘날 보안의 핵심은 '일회용 비밀번호(OTP)'입니다.

고정된 비밀번호는 탈취의 위험이 크지만, 매번 바뀌는 OTP는 강력한 2차 인증 수단이 됩니다.

이번 포스팅에서는 OTP의 대표적인 3가지 방식인 시간 동기화(TOTP), 이벤트 동기화(HOTP), 챌린지-응답(C-R) 방식을 Java와 Python으로 각각 구현해 보겠습니다.

2. 서버 동기화 방식 (TOTP: Time-based OTP)

개념: 서버와 사용자의 '현재 시간'을 기준으로 비밀번호를 생성합니다. 보통 30초마다 번호가 갱신되는 가장 대중적인 방식입니다.

첫번째는 자바(JAVA) 구현방식이다.

위의 사진과 같은 코드의 방식으로 진행되고 여기서 핵심 코드는

long currentTimeSeconds = System.currentTimeMillis() 핵심: 시간을 30초 단위 카운터로 변환

1000L; long counter = currentTimeSeconds / 30L; 이후 HMAC-SHA1로 해싱하여 6자리 추출

System.currentTimeMillis()

: 현재 시간을 밀리초 단위로 가져옵니다.

이를 1000으로 나누어 초 단위로 변환 후 30으로 나누어 시간 동기화 카운터를 만듭니다.

Mac.getInstance("HmacSHA1")

HMAC-SHA1 암호화 알고리즘 인스턴스를 생성합니다.

공유 비밀키와 시간을 조합해 해시를 만드는 핵심 역할을 합니다.

SecretKeySpec 제공된 비밀키 문자열을 암호화 알고리즘에서

사용할 수 있는 키 형식으로 변환합니다.

mac.doFinal(data)

준비된 카운터 데이터(시간 값)를 비밀키와 함께 해싱하여 고유한 바이트 배열을 생성합니다.

Dynamic Truncation

생성된 해시 배열에서 특정 위치의 값을 추출해 사람이 읽기 쉬운 6자리 숫자로 바꾸는 과정입니다. (코드 하단의 비트 연산 부분)

결과 값:

두번째는 파이썬(Python) 구현방식이다.

결과 값:

3. 이벤트 동기화 방식 (HOTP: HMAC-based OTP)

개념: 시간이 아닌 '카운터(버튼을 누른 횟수)'를 기준으로 합니다. 서버와 클라이언트가 동일한 카운트 숫자를 유지해야 인증이 가능합니다.

첫번째는 자바(JAVA) 구현방식이다.

위의 사진과 같은 코드의 방식으로 진행되고 여기서 핵심 코드는

byte[] data = ByteBuffer.allocate(8).putLong(counter).array(); 핵심: 횟수(counter)를 8바이트 데이터로 변환

ByteBuffer.allocate(8).putLong(counter)

숫자 형태인 카운터(1, 2, 3...)를 8바이트(64비트)의 바이트 배열로 변환합니다.

암호화 함수인 HMAC은 숫자 데이터가 아닌 바이트 데이터를 입력값으로 받기 때문에 이 변환 과정이 꼭 필요합니다.

SecretKeySpec(key.getBytes(), "HmacSHA1")

사용자가 설정한 비밀키 문자열을 HMAC-SHA1 알고리즘 전용 키 객체로 변환합니다. 이 키가 있어야만 해시값을 안전하게 생성할 수 있습니다.

mac.doFinal(data)비밀키와 바이트로 변환된 카운터 값을 조합하여 최종적인 **해시값(20바이트)**을 계산합니다.

이 값은 외부에서 예측하기 불가능한 난수 형태를 띱니다.

Bitwise Operations (& 0x7f, << 24 등)

생성된 긴 해시값에서 특정 4바이트를 뽑아내어 사람이 읽을 수 있는 정수 형태로 변환하는 과정입니다. 이를 통해 복잡한 해시가 6자리 OTP 번호로 바뀝니다

결과 값:

두번째는 파이썬(Python) 구현방식이다.

결과 값:

4. 챌린지-응답 방식 (Challenge-Response)

개념: 서버가 난수(Challenge)를 던지면, 사용자가 자신의 비밀키로 계산한 결과값(Response)을 돌려주는 방식입니다. 재전송 공격에 매우 강력합니다.

첫번째는 자바(JAVA) 구현방식이다.

위의 사진과 같은 코드의 방식으로 진행되고 여기서 핵심 코드는

SecretKeySpec signKey = new SecretKeySpec(secret.getBytes(), "HmacSHA256"); 핵심: HMAC-SHA256을

사용한 긴 해시 응답

Mac.getInstance("HmacSHA256")

1, 2번보다 더 강력한 보안이 필요한 챌린지 방식에서는 SHA256 알고리즘을 사용 이는 해시값이 더 길고 복잡하여 위조가 거의 불가능합니다.

challenge.getBytes()서버가 보낸 일회용 난수(Challenge)를 암호화 계산을 위해 바이트 배열로 변환합니다.

new BigInteger(1, rawHmac)계산된 HMAC 결과(바이트 배열)는 읽기 어렵기 때문에, 이를 매우 큰 숫자로 변환합니다.

String.format("%064x", ...)큰 숫자로 변환된 데이터를 16진수(hex) 문자열로 포맷팅합니다. 챌린지-응답 방식에서는 보통 6자리 숫자 대신 이렇게 긴 문자열(응답값)을 서버로 전송하여 인증합니다.

결과 값 :

두번째는 파이썬(Python) 구현방식이다.

결과 값:

5. 결론 및 비교

TOTP: 스마트폰 앱 인증에 적합 (Google Authenticator 등)
HOTP: 전용 하드웨어 토큰기에 적합
Challenge-Response: 높은 보안이 필요한 서버-클라이언트 통신에 적합

[Linux] 초보자를 위한 리눅스 터미널 기초: alias 설정부터 도움말 확인까지

cyberjung — Fri, 13 Mar 2026 21:43:50 +0900

리눅스를 처음 접하면 복잡한 명령어들이 어렵게 느껴질 수 있습니다. 오늘은 터미널 사용을 훨씬 편하게 만들어주는 별칭(alias) 설정 방법과, 명령어의 용도를 확인하는 다양한 방법을 정리해 보겠습니다

1. 명령어 별칭(alias)으로 작업 효율 높이기

자주 사용하는 긴 명령어를 나만의 짧은 키워드로 등록할 수 있습니다.

별칭 등록하기: alias 별칭='명령어'
- 예: alias c='cal' (이제 c만 입력해도 달력이 출력됩니다.)
별칭 해제하기: unalias 별칭
- 예: unalias c (등록한 별칭 c를 삭제합니다.)
모든 별칭 해제: unalias -a (현재 세션에 등록된 모든 별칭을 지웁니다.)

Tip: 터미널을 껐다 켜도 별칭을 유지하고 싶다면 ~/.bashrc 파일에 등록해야 합니다.

ls -> 리눅스에서 가장 많이 사용되는 명령어

"현재 디렉토리(폴더) 안에 어떤 파일이나 폴더가 있는지 목록을 보여주는 역할"

자주 쓰는 옵션
- ls -l: 파일의 권한, 소유자, 크기, 수정 날짜 등 상세 정보를 리스트 형태로 보여줍니다.
- ls -a: 이름이 .으로 시작하는 숨겨진 파일까지 모두 보여줍니다.
- ls -al: 위 두 옵션을 합쳐서 모든 파일의 상세 정보를 보여줍니다.

cal -> 터미널에 "텍스트 형식의 달력을 출력" 명령어

자주 쓰는 활용법:
- cal [연도]: 해당 연도의 12개월 달력을 모두 보여줍니다. (예: cal 2026)
- cal [월] [연도]: 특정 시점의 달력을 확인합니다. (예: cal 12 2025)
- ncal: cal과 비슷하지만 달력을 세로 방향으로 출력해주는 좀 더 현대적인 명령어입니다.

만약, 설정에 놓은 별칭을 없애고 싶다면 unalias 를 사용하면 된다.

2. 이 명령어는 어디에 있을까? which 명령어

리눅스 시스템 내에서 특정 명령어의 실행 파일이 어느 경로에 저장되어 있는지 확인하고 싶을 때 사용합니다.

which cal → /usr/bin/cal
which ls → /usr/bin/ls

우리가 흔히 쓰는 명령어들이 사실은 /usr/bin 폴더 안에 위치한 실행 파일이라는 것을 알 수 있습니다.

3. 모르는 명령어가 나왔을 때? 도움말 확인법

명령어의 정확한 옵션이나 용도가 궁금할 때 구글링보다 빠른 방법들입니다.

① whatis: 명령어 한 줄 요약

명령어의 기능을 아주 간략하게 알고 싶을 때 유용합니다.

whatis cal : "display a calendar" (달력 표시)
whatis ls : "list directory contents" (디렉토리 목록 표시)

② man: 상세 매뉴얼 확인

가장 강력한 도움말 도구입니다. 명령어의 모든 옵션과 사용법을 보여줍니다.

man -h: 매뉴얼 명령어 자체의 도움말(도작 모드 등)을 확인합니다.
man [명령어]: 해당 명령어의 상세 페이지로 들어갑니다. (나올 때는 q 입력)

man - h (h -> help)

man [명령어]: 특정 명령어의 두꺼운 백과사전(매뉴얼)을 펼치는 것.
man -h: man이라는 프로그램의 사용 설명서(Quick Help)를 짧게 보여달라는 것.

Mac 환경에서 VMware로 Rocky Linux 설치하기

cyberjung — Thu, 12 Mar 2026 17:17:16 +0900

안녕하세요! 오늘은 Mac 환경에서 가상화 소프트웨어인 "VMware Fusion"을 사용하여

안정적인 리눅스 배포판인 "Rocky Linux"를 설치하는 방법을 정리해 보려고 합니다.

가장 먼저 OS 설치를 위한 이미지 파일이 필요합니다. 록키 리눅스 공식 홈페이지의 다운로드 페이지에 접속합니다.

다운로드 주소: https://rockylinux.org/download
플랫폼 선택 시 주의사항: M4 맥북은 ARM 기반 아키텍처를 사용하므로 반드시 ARM64(aarch64) 버전을 선택해야 합니다.
이미지 타입 선택: 가장 범용적인 'DVD' 버전을 권장합니다.
- DVD ISO: GUI 환경 및 주요 라이브러리가 모두 포함되어 있어 별도의 인터넷 연결 없이도 기본적인 패키지 설치가 가능합니다. (용량은 크지만 가장 안정적입니다.)
- Minimal ISO: 텍스트 기반의 최소 설치 버전입니다.

VMware Fusion 실행: File > New를 클릭하여 새 가상 머신 생성 창을 연다.

ISO 파일 드래그: 다운로드한 Rocky 파일을 설치 창으로 드래그 앤 드롭한다.

계속을 눌러 진행 후 Finsh 버튼 을 누르면 된다.

Rocky Linux 설치 진행

Install Rocky Linux 10.1 을 눌러 설치를 진행

Welcome Screen: 언어 설정을 진행

Software Selection (중요): 우측 상단 'Software Selection'에서 'Server with GUI'를 선택합니다.

M4 환경에서 GUI 라이브러리를 제대로 활용하기 위해 기본 서버 환경에 필요한 개발 도구 옵션을 추가로 체크해 주면 좋다.

Installation Destination: 가상 디스크를 선택하고 완료(Done)를 누릅니다.

Network & Host Name: 이더넷을 ON으로 켜서 인터넷이 연결되도록 설정

설치가 완료 되었다면, 모든 과정이 끝나면 시스템을 재부팅합니다.

터미널을 열고 이와 같은 명령어로 sudo dnf update -y 시스템을 최신 상태로 업데이트하며 설치를 마무리합니다.

웹 프로그래밍 첫걸음: HTML 구조와 자기소개 페이지 만들기

cyberjung — Wed, 11 Mar 2026 10:57:37 +0900

안녕하세요! 웹 프로그래밍 수업의 기초, HTML 구조 잡기를 실습했습니다

비주얼 스튜디오(VS Code)를 활용해 직접 코드를 작성해 보니,

우리가 매일 보는 웹사이트들이 어떤 뼈대로 이루어져 있는지 조금씩 실감이 나네요 :)

1. HTML의 기본 골격 이해하기비주얼 스튜디오 코드(VS Code)에서 새 파일을 만들고

! 만 입력하면 표준 HTML5 골격이 자동으로 생성됩니다.

코드 핵심 요약 :

<!DOCTYPE html>: "이건 HTML5 문서야!"라고 선언
<html lang="en">: 페이지의 기본 언어 설정 (한국어라면 ko로 변경 권장)
<meta charset="UTF-8">: 가장 중요! 한글이 깨지지 않게 해주는 문자 인코딩 설정
<meta name="viewport" ...>: 스마트폰이나 태블릿 등 기기 크기에 맞춰 화면을 조절해주는 모바일 대응 설정
<title>: 브라우저 상단 탭에 들어갈 제목입니다.
<body>: 우리가 작성한 글이 들어가는 실제 콘텐츠 공간

2. 실습 1: 기초 자기소개 페이지

첫 번째 실습에서는 가장 기본이 되는 제목(h1)과 문단(p) 태그를 활용해 보았습니다.

<h1>자기소개</h1>: 페이지의 가장 큰 주제를 나타냅니다.
<p>: 문단을 나눌 때 사용하며, 텍스트를 구조적으로 배치합니다.

<h1> ~ <h6>: 제목 (숫자가 커질수록 글자는 작아짐)

p: 문단 나누기