B 드라이브

웹 개발 공부하기 - 챕터 1(HTML/CSS + JS 기초) #1 일뻔

s.e.s — Mon, 27 Oct 2025 16:40:56 +0900

https://developer.mozilla.org/ko/docs/Web/HTML

HTML: Hypertext Markup Language | MDN

HTML 소개 웹 개발이 처음이시라면 HTML 기본 문서에서 HTML이란 무엇인지, 그리고 HTML의 사용법을 배워보세요. HTML 자습서 HTML 학습지를 방문하시면 HTML 사용법과 자습서, 완전한 예제를 찾아보실

developer.mozilla.org

MDN님님님들이 이런 가이드를 작성해주셨다. 그리고 번역한 한국인님들 정말 감사합니다... 공부 열심히 할게요

들어가보면, 먼저 HTML이 뭔지 알려준다

1. HTML이란?

HyperText Markup Language. 웹을 이루는 가장 기초적인 구성 요소로 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다. 여기서 말하는 HyperText란 웹 페이지를 다른 페이지로 연결하는 링크를 말한다. 라고 적혀있다.

평소에 자주 쓰는 '하이퍼링크'라는 용어와는 무슨 차이일까? 궁금증이 생겼다.

하이퍼텍스트가 좀 더 큰 개념으로 하이퍼링크를 포함한다.

하이퍼텍스트 안에서 다른 곳으로 이동하기 위해 우리가 실제로 클릭하는 특정 부분을 하이퍼링크라고 하는 것이었다.

MDN HTML 시작하기 - HTML 요소(Element)의 구조

여는 태그(Opening tag): 요소의 이름과 열고 닫는 꺽쇠 괄호로 구성
닫는 태그(Closing tag): 요소 앞에 슬래시(/)가 있는 걸 빼면 여는 태그와 동일
내용(Content): 요소의 내용
요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고 한다

2. Block vs Inline

문서에서는 Block-level Elements랑 nline elements를 구구절절 설명하고 있다. 이게 어떻게 입문 문서일까. 나같으면 읽자마자 도망간다;

그냥 간단히 블록은 한 줄을 다 먹는 애고 인라인은 블록 안에서 자기 크기만큼 먹는 애다.

그러니 한 줄 다먹는 블록이 인라인 안에 들어갈 순 없다. 반대는 당연히 가능하지만!

3. 빈 요소(Empty elements)

모든 엘리먼트가 여는 태그, 내용, 닫는 태그 패턴을 따르지는 않는다. 주로 문서에 무언가를 첨부하기 위해 Single tag를 사용하는 엘리먼트도 있다. 이미지를 삽입하는 <img> 엘리먼트가 그 예시다.

4. 속성(Attributes)

엘리먼트는 속성을 가질 수 있다.

- boolean attributes

<input type="text" disabled="disabled">
<input type="text" disabled />

여기까지 하다가 진짜 너무 지루하고 못해먹겠어서 바로 프로젝트 기반으로 변경....

바로바로 독서기록장 웹서비스를 만들어보겠습니다

웹 개발 공부하기 개요

s.e.s — Fri, 24 Oct 2025 15:34:18 +0900

iOS 위주로 개발 공부를 하다가 막상 실무는 Flutter로만 하다보니 점점 네이티브 개발에 대한 기억도 사라져 간다.

이왕 뇌 초기화한 김에 예전부터 미뤄두었던 웹 개발 공부를 하려고 한다.

절대 지금 일이 없어서 월루를 하는 게 아니라 자기 개발이다...!!!

푸릇푸릇한 대학시절의 나... 공부하겠다고 TIL 레포지토리까지 파놓았다.. 아주 기특해 죽겠다

https://github.com/ddeonseo/TIL.git

GitHub - ddeonseo/TIL

Contribute to ddeonseo/TIL development by creating an account on GitHub.

github.com

대충 보니까 자동화 해둬서 push하면 README가 업데이트되어서 목차를 예쁘게 정리되는 듯

마지막 커밋이 2024년 10월인거 보면 10월이 공부하고 싶은 달인가? ㅎㅎ

여기다는 좀 정제되지 않은 아무 말 대잔치의 공부 기록을 남기고 알짜만 정제해서 마크다운으로 바꿔서 푸시해야겠다.. 그래야 어디 보여주기 안 쪽팔릴 것 같애

지금은 10월 목표를 세우기는 늦었으니 오늘부터 시작해서 11월말까지의 목표를 세워야겠다

바로바로...

4주안에 리액트 찍먹해보기~~~~~~!!

듣기로는 플러터랑 리액트가 유사해서 공부하기 편하다는데... 뭐 해봐야 알 것 같다

이딴 걸 개요라고 할 수 있을 진 모르겠는데 나름대로 계획을 세워보자면

HTML/CSS + JS 기초 (사실 이건 쫌 날먹이긴해)
모던 JS, React 입문
React 핵심
구현(뭐 만들지 아직 안정햇슴)

이렇게다... LLM들이 짜줌!! 성능좋다잉

코어키퍼(Core Keeper) 24시간 서버 만들기 (모드 적용 및 월드 백업 포함)

s.e.s — Sun, 5 Oct 2025 17:31:03 +0900

작년 얼리액세스 당시에 열심히 하다가 컨텐츠 다 깨고 접은 뒤에 정식 출시된 게임 코어키퍼

최대 8인 멀티까지 가능하고 스타듀밸리 + 마크를 섞은 게임이라 중독성 있다

멀티를 할 때 한 사람이 서버를 만들면 거기에 들어오는 방식인데

문제는 서버장이 계속 서버를 열어두고 있어야 서버에 들어갈 수 있어서 다소 귀찮다

이에 상설 서버를 GCP 같은 걸로 만들어둘 순 없을까 검색하다가 좋은 글을 발견했다

[GCP] GCP로 Core Keeper 24시간 Dedicated Server 열기 -1-

1편 - GCP에서 VM 인스턴스 만들기 가이드라인

salmon99.github.io

1편은 말 그대로 GCP에서 VM 인스턴스를 만드는 과정이라서 그대로 따라하면 된다

[GCP] GCP로 Core Keeper 24시간 Dedicated Server 열기 -2-

2편 - Ubuntu에서 Docker를 설치하고 이미지로 컨테이너 실행하는 가이드라인

salmon99.github.io

2편은 도커 컨테이너를 설정하는 부분이다. 마찬가지로 그대로 진행해주면 된다

다만 기존에 사용하던 맵과 진행사항을 가져오는 부분이나, 모드를 설정하는 부분이 설명되어 있지 않아서 추가로 찾아본 뒤 작성한다

모드 적용법

https://github.com/escapingnetwork/core-keeper-dedicated

GitHub - escapingnetwork/core-keeper-dedicated: Dockerfile for automated build of a Core Keeper Dedicated Server

Dockerfile for automated build of a Core Keeper Dedicated Server - escapingnetwork/core-keeper-dedicated

github.com

이 레포의 README를 읽으면 쉽게 적용할 수 있다.

난 그것도 모르고 직접 server files에 들어가서 모드 폴더를 하나하나 만들고, 압축 풀고, 귀찮은 짓을 했는데

사실 그렇게 해도 모드 하나만 달라도 서버 참가할 때 버전이 달라서 못 들어가는 참사가 생기기 때문에 그냥 얌전히 리드미 대로 하자.

1. API key 발급 받기

인게임 메뉴에서 모드를 적용할 때 mod.io 계정을 만들었을 것이다 (나는 스팀 계정으로 연동함)

https://mod.io/g

Cross Platform Mod Support for Games

Support mods on PC, console and mobile with mod.io, a platform which makes it easy to grow, manage and integrate UGC in-game, using our API, SDK and plugins for Unity, Unreal Engine and more.

mod.io

mod.io에 들어가서 로그인 한 다음

화살표로 가리킨 프로필을 클릭하면 API Access 메뉴가 보인다

API Access로 이동하자

아니면

https://mod.io/me/access

Cross Platform Mod Support for Games

Support mods on PC, console and mobile with mod.io, a platform which makes it easy to grow, manage and integrate UGC in-game, using our API, SDK and plugins for Unity, Unreal Engine and more.

mod.io

이렇게 직접 접근도 가능하다

페이지에 들어가보면 API Access 설정 화면이 나온다

나는 키를 발급 받은 상태라 이렇게 나온다

키가 없으면 API Key를 받을 수 있는 request 버튼이 나올텐데 눌러서 받아주자

request 보내면 바로 key와 path를 알 수 있다

key는 오른쪽 눈 모양 아이콘을 누르면 보이니 복사하면 되고

path는 API path:의 오른쪽에 나온다 (예시: https://u-*.modapi.io/v1)

두 가지 값을 복사해두면 된다

2. .env 파일 수정

.env 파일 아래에 아래 내용을 추가해주자

MODS_ENABLED=true # 모드를 사용할 것인지 여부 (true로 하자)
MODIO_API_KEY=your_api_key # 아까 복사해둔 key 붙여넣기
MODIO_API_URL=your_api_url # 아까 복사해둔 path 붙여넣기
MODS=mod1,mod2,mod3 # 아래에 추가 설명

이걸 yml 파일에 추가해주면 되는데 MODS는 추가할 모드의 이름을 넣어주면 된다

추가할 모드의 이름을 아는 방법은 다음과 같다

Better Text Input 모드를 추가하려 한다고 가정하자.

mod.io 사이트에서 해당 모드를 검색한 뒤 페이지에 들어가보면 상단에 링크가 보인다

https://mod.io/g/corekeeper/m/better-text-input#description

우리는 여기서 m/ 다음의 글자에 집중하면 된다

better-text-input이 우리가 적용할 모드의 이름인 것이다 (#description 같은 건 무시해도 됨)

그리고 잡몹 체력바도 보여주는 Enemy Health Bars 모드는

https://mod.io/g/corekeeper/m/healthbars

healthbars가 모드의 이름인 거다

내가 이 두 개의 모드를 적용하고 싶으면

MODS=core-lib,healthbars,better-text-input

이렇게 적용해주면 된다. (core-lib는 모드를 적용할 때 꼭 필요한 선행 모드라서 임의로 집어넣었다)

2개가 아니라 3개 4개의 모드를 적용하는 것도 마찬가지다

링크에서 이름을 알아낸 뒤 뒤에 적어주면 된다

버전도 지정해줄 수 있는데 그건 github에 들어가서 알아서 읽어서 합시다

SERVER_PORT=27015

MODS_ENABLED=true
MODIO_API_KEY=your_key
MODIO_API_URL=your_url
MODS=healthbars,corelibrewiredextension,coreliblocalization,corelibcommands,better-text-input,core-lib

이렇게 작성해주면(내 로컬 환경과 정확히 맞추기 위해 MODS를 수정함), 도커 container가 시작할 때 모드들이 최신 버전으로 업데이트해서 적용된다...

는데 나는 여기서 문제가 생겼다!!!

3. override.env 파일 생성

분명 모드 관련 내용을 적어뒀는데 컨테이너를 실행시키면

MODS_ENABLED=false라고 읽어버려서 모드 설치를 생략하고 서버를 열어버리니까

이미 모드를 적용한 내 컴퓨터와 환경이 안 맞아서 게임에 참가가 안 됐다...

아직도 원인은 모르겠는데, 일단 해결법은 찾았다.

docker-compose.yml, .env, server-data 등이 있는 디렉토리에 override.env를 생성해준다

vim override.env

그 다음

MODS_ENABLED=true
MODIO_API_KEY=your_key
MODIO_API_URL=your_api
MODS=healthbars,corelibrewiredextension,coreliblocalization,corelibcommands,better-text-input,core-lib

아까 .env에 추가했던 내용을 작성해주었다.

SERVER_PORT를 생략한 이유는.. 새벽에 오류를 해결 하다가 없어도 될 것 같아서 빼버렸다.

자세하게는 기억 안 나는데 어차피 게임 ID로 접속할 거라 저 특정 포트가 필요 없어서? 였던 것 같다

README의 Network Mode를 정독해보고 알아서 판단해서 넣을지 말지 결정하면 된다

이렇게 한 뒤

sudo docker compose down && sudo docker compose up -d

서버를 재실행하고

sudo docker logs -f core-keeper-dedicated

로그를 확인해보니 드디어 모드를 설치하는 로그가 떴다!!

Installing mods...
...
Installed CoreLib (core-lib) 3.4.1

이제 아래 명령어로 GameID를 확인하고 접속하면 원만히 잘 실행된다.

모드 설치는 됐는데 버전이 안 맞는다고 접속이 안되면 서버에 적용한 모드랑 내 PC에 적용한 모드가 완벽히 일치하는지 확인해보자

sudo docker exec -it core-keeper-dedicated cat /home/steam/core-keeper-dedicated/GameID.txt

맵 진행사항 적용

모드도 적용했으니 이제 맵 진행 사항을 옮겨보자. 맵 진행을 옮기는 건 간단하다!

1. 새로 만든 서버의 월드 파일 삭제

sudo rm /root/server-data/worlds/*

충돌이 생길 수도 있으니 새로 만든 서버의 worlds 정보를 지운다

2. 기존 월드 파일 복사

내 PC -> 코어키퍼 설치한 드라이브 -> 사용자 -> 내 프로필에 들어간 다음 AppData에 들어간다

(AppData가 안 보이면 숨김 폴더 보기 설정을 키면 된다)

그 다음 LocalLow\Pugstorm\Core Keeper\Steam\STEAM_ID\worlds로 들어간다

worlds 폴더에는 위와 같이 0.world.gzip, 1.world.gzip 파일들이 쭉 있을 것이다

world 앞의 숫자들은 게임 시작을 누르고 서버를 고를 때 나오는 그 순서다.

내가 세계 1을 옮기고 싶으면 0.world.gzip으로 덮어씌우면 되고

세계 3을 옮기고 싶으면 2.world.gzip으로 덮어씌우면 된다

내 경우 세계 4를 옮기고 싶어서 3.world.gzip과 3.world.gzip.pugbackup을 옮길 것이다

backup 파일은 굳이 옮겨야 하나 싶긴 한데 혹시 몰라서 같이 복사해서 백업 폴더에 옮겨두었다.

3. 파일 업로드

/root/server-data/worlds/

다음 경로로 아까 복사해둔 두 파일을 옮겨주자.

(SSH에 파일을 업로드하고 옮기는 과정은 이 글에서 설명하면 너무 복잡해지니 생략한다)

그 다음 ls로 worlds 폴더에 저장된 world를 보면

3.world.gzip과 3.world.gzip.pugbackup이 있을 것이다.

각각 0.world.gzip, 0.world.gzip.pugbackup으로 이름을 변경해주면 된다.

이제 다시 도커 컨테이너를 실행해주면 기존에 사용하던 월드의 정보가 그대로 적용될 것이다.

지도가 적용되지 않았을 경우 지도 테이블을 한 번씩 봐주면 해결된다.

https://steamcommunity.com/app/1621690/discussions/0/4754200750489016394/

Guide for Transferring Worlds :: Core Keeper General Discussions

How to transfer hosting of a Core Keeper world from one PC to another. I use Windows but hopefully some of this will translate well to other OS users. You can copy the files across from one PC to another but be mindful that the corresponding number on the

steamcommunity.com

해당 게시글을 참고했는데, worldgenparams, worldinfos, worlds를 다 복사할 필요는 없고

간단히 worlds의 (번호).world.gzip만 옮겨주면 내 월드를 잘 옮겨줄 수 있다!

GCP로 Dedicated Server를 여는 데 도움을 주신 남현정님과 도커 파일을 배포해주신 분들께 감사드립니다.

끝.

질문 있으면 댓글로 남겨주세여 시간날 때 확인함

Commit Convention 커밋 컨벤션

s.e.s — Wed, 22 May 2024 00:40:19 +0900

커밋 메시지 형식

<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>

type

feat (feature)
fix (bug fix)
docs (documentation)
style (formatting, missing semi colons, …)
refactor
test (when adding missing tests)
chore (maintain)

scope

어디가 변경되었는지
생략 가능
$location, $browser, $compile, $rootScope, ngHref, ngClick, ngView…
함수가 변경되었다면 함수 이름, 메소드가 추가되었다면 해당 클래스 이름 등

subject

명령문, 현재 시제
끝에 마침표 X
첫글자 소문자로 쓰기

body

명령문, 현재 시제 권장
변경한 이유, 변경 전과의 차이점 설명
무엇을 왜 했는지
생략 가능

footer

주요 변경 내역(breaking changes)
모든 주요 변경 내역이 변경점, 변경 사유, 마이그레이션 지시와 함께 언급
해결된 issue tracker ID 명시 (주로)
생략 가능

참고한 자료

https://gist.github.com/stephenparish/9941e89d80e2bc58a153

Git Commit Message Conventions

Git Commit Message Conventions. GitHub Gist: instantly share code, notes, and snippets.

gist.github.com

Google Material Icons 구글 머터리얼 아이콘 HTML 활용법

s.e.s — Tue, 21 May 2024 19:18:55 +0900

1. 구글 머터리얼 아이콘

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

fonts.google.com

2. 적용법

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- ligatures 예시 -->
<span class="material-icons">face</span>

<!-- numeric character 예시 -->
<span class="material-icons">&#xE87C;</span>

ligatures(합자)라고 불리는 typographic 기능을 사용한 예시
텍스트 이름만 사용해서 아이콘을 렌더링함
대체 작업(텍스트 → 아이콘)은 웹 브라우저에 의해 자동으로 수행
데스크탑, 모바일 기기, 대부분의 최신 브라우저에서 지원됨

3. 아이콘 스타일 지정

/* 아이콘 사이즈 조정 */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }

/* 밝은 배경에 검정색 아이콘 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 어두운 배경에 흰색 아이콘 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

4. Sizing

/* 아이콘 사이즈 조정 */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }

/* 밝은 배경에 검정색 아이콘 */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* 어두운 배경에 흰색 아이콘 */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

아이콘 크기는 자유롭게 조정 가능
material design icons 가이드라인에 따르면 18, 24, 36, 48px 권장
default는 24px

5. Coloring

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

active icon
disabled/inactive icon
예시
색상 지정

6. 활용 예시

line 6, 12 참조

내가 작성한 코드를 발췌한 것이지만, 이 경우 credit_card 뿐만 아니라 모든 material-icons가 조정된다.

추후 이 페이지에 다른 icon이 추가될 수 있으니 좋은 예시는 아니다.

따라서,

<span class="material-icons credit">credit_card</span>

.credit {
 /* 조정할 요소 */
}

이렇게 수정하면 credit_card만 조정된다!

+) 다른 사용법

<i class="material-icons">mic</i>

i 태그도 사용 가능하다

<i> 태그는 원래 이탤릭체를 표시하는 태그인데, 최근에는 아이콘 폰트 라이브러리와 함께 아이콘을 표시하는 데 자주 사용된다고 한다

Material Icons나 Font Awesome과 같은 아이콘 폰트 라이브러리에서는 `<i>` 태그 안에 아이콘의 이름을 지정하여 아이콘을 삽입할 수 있다

7. 정리 출처

https://developers.google.com/fonts/docs/material_icons?hl=ko

머티리얼 아이콘 가이드 | Google Fonts | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 머티리얼 아이콘 가이드 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 머티리얼 아이콘의 개요 - 아

developers.google.com

0818 모각코 6회차

s.e.s — Fri, 18 Aug 2023 21:36:00 +0900

6. Any, AnyObject, nil

Any - Swift의 모든 타입을 지칭

var someAny: Any = 100
someAny = "어떤 타입도 수용 가능"
someAny = 123.12

let someDouble: Double = someAny // 오류

AnyObject - 모든 클래스 타입을 지칭하는 프로토콜

class SomeClass {}
var someAnyObject: AnyObject = SomeClass()
someAnyObject = 123.12 // 오류

nil - 없음을 의미, null과 유사

someAny = nil //오류
someAnyObject = nil // 오류

0816 모각코 5회차

s.e.s — Wed, 16 Aug 2023 20:57:33 +0900

0. Swift란?

Swift는 iOS, macOS, watchOS, and tvOS app 개발을 위해 만들어진 언어다. C와 Objective-C와 많은 부분에서 유사하다.

객체 지향 프로그래밍, 함수형 프로그래밍의 패턴을 모두 갖고 있다. 특징은 나중에 차차 정리해볼 예정이다.

1. Naming

Swift는 이름을 지을 때 Camel Case를 사용한다!

함수, 메서드, 변수, 상수 -> Lower Camel Case

클래스, 구조체, 열거형, 익스텐션과 같은 타입명 -> Upper Camel Case

2. 콘솔 출력

- print: 단순 문자열 출력

- dump: 인스턴스의 자세한 설명까지 출력

3. String Interpolation

문자열 내에 변수 또는 상수의 실질적인 값을 표현하기 위해 사용

백슬래시(\)와 괄호로 표현한다 \()

let age: Int = 10
print("안녕하세요! 저는 \(age)살입니다.")

4. 변수와 상수

- 상수 선언 키워드: let

- 변수 선언 키워드: var

// let 이름: 타입 = 값
// var 이름: 타입 = 값

let constant: String = "hello"
let variable: String = "world"

constant = "hello world!" // 오류
variable = "hello world!" // 가능

Swift는 선언 후 나중에 값을 할당할 수 있다

단, 나중에 할당할 변수와 상수는 반드시 타입을 명시해야 한다

상수의 경우 첫 할당 이후로는 값 변경 X

변수는 계속해서 값을 변경할 수 있음

5. 기본 데이터 타입

Swift는 안전한 프로그래밍을 위해 데이터 타입 간의 변환이 까다롭다.

- Bool (true/false) : 0/1 불가능

- Int (실수, 소수 X)

- UInt (음수 X)

- Float (정수 O)

- Double (정수 O, Float X)

- Character (큰 따옴표 사용, 이모티콘 가능)

- String

6. Any, AnyObject, nil

Any - Swift의 모든 타입을 지칭

var someAny: Any = 100
someAny = "어떤 타입도 수용 가능"
someAny = 123.12

let someDouble: Double = someAny // 오류

AnyObject - 모든 클래스 타입을 지칭하는 프로토콜

class SomeClass {}
var someAnyObject: AnyObject = SomeClass()
someAnyObject = 123.12 // 오류

nil - 없음을 의미, null과 유사

someAny = nil //오류
someAnyObject = nil // 오류

0815 모각코 4회차

s.e.s — Tue, 15 Aug 2023 20:13:58 +0900

목표 - GAN의 한계와 DCGAN

0. GAN의 한계

GAN은 대표적인 생성 모델로 이미지 생성에서 아주 좋은 성능을 보인다. 그러나 모든 기술이 그렇듯 GAN 또한 한계점을 가지고 있다. GAN은 이론적으로는 fixed solution으로 수렴하는 것이 보장되어 있지만 실제 적용은 이론적 가정이 깨지면서 생기는 불안정한 구조적 단점을 보이곤 한다. 그 중 mode-collapse이 대표적이다. Mode-collapse는 generator와 discriminator 중 하나가 너무 학습이 잘 돼서 다른 하나의 학습이 진행되지 않는 것을 말한다. GAN은 generator와 discriminator가 대결하며 학습하는 구도인 만큼 학습이 불안정하다는 단점이 있다. Discriminator와 generator가 서로 균형 있게 훈련을 주고 받아야 하는데 두 모델 간 실력차가 발생하는 경우 훈련이 한 쪽에 치우쳐 궁극적으로 성능이 제약된다. 예를 들어 generator가 정말 진짜 같은 가짜 데이터를 생성한다면 discriminator는 이를 항상 구별할 수 없을 것이고, discriminator는 더 이상 학습을 진행할 수 없는 것이다. GAN의 훈련 성능을 높이기 위해 다양한 연구를 진행하고 있는데, 대표적인 것이 DCGAN(Deep Convolutional GAN)이다.DCGAN이 세상에 나온 이후로 대다수의 GAN 구조는 전부 어떤 식으로든 DCGAN 구조를 사용했다고 할 수 있다.

1. DCGAN에 대하여

DCGAN의 생성자 구조도

DCGAN은 GAN에 지도학습에서 이미 폭 넓게 적용되던 CNN을 사용하는 것으로 비지도학습 적용을 위해 fully connected DNN 대신 CNN(Convolutional Neural Networks) 기법으로 신경망을 구성했다. Supervised Learning에 CNN을 이용한 것은 Computer vision application에 큰 반향을 일으켰다. 그 반면 비지도학습에 CNN을 이용하는 것은 아주 적은 관심을 받았는데, DCGAN paper은 지도학습에서의 CNN의 성공과 비지도학습 간의 격차를 줄이는 데 큰 역할을 했다. CNN은 전체 데이터의 특정 부분에 대한 주요 특징 값을 추출하는 Convolutional layer와 추출한 특징 중 제일 중요한 값만 추려내는 Polling layer가 교차하면서 이루어진다. 이때 이미지와 같은 부분의 특징을 읽어내는 성능이 탁월하여 학습이 잘 된다는 장점을 GAN의 이미지 생서에 적용한 것이다. 각 층 해당 뉴런의 입력 대비 출력을 얼마나 반영할지 결정하는 함수인 활성화함수의 적절한 선택이 중요한데, GAN을 위해서 leaky_ReLU 함수를 사용하여 분류자의 학습 효율을 높였다.

DCGAN 논문이 기여한 바는 다음과 같다. 대부분의 상황에서 언제나 안정적으로 학습이 되는 Convolutional GAN 구조를 제안했다는 점, DCGAN으로 학습된 Generator가 벡터 산술 연산이 가능한 성질을 갖고 이것으로 semantic 수준의 sample genration을 해볼 수 있다는 점, DCGAN이 학습한 filter들을 시각화하여 보여주고 특정 filter들이 이미지의 특정 물체를 학습했다는 걸 보여주었다는 점, 이렇게 학습된 Dicriminator가 다른 비지도 학습 알고리즘과 비교하여 비등한 이미지 분류 성능을 보였다는 점 총 네 가지로 볼 수 있다.

2. DCGAN의 활용 사례

DCGAN은 GAN의 학습에 대한 문제점을 상당 부분 극복해내면서 주목을 받았으며 latent vector를 이용한 이미지의 산술적 연산을 가능하게 했다. DCGAN의 등장으로 성능이 향상된 GAN을 통해 더 완벽한 가짜 데이터를 만들어내는 모델이 연구됨에 따라 GAN의 활용 범위 역시 더욱 넓어지고 있다. 특히 2017년 워싱턴대학교 연구팀은 영상 합성에 GAN을 적용하여 만든 오바마 전 미국 대통령의 가짜 영상을 공개해 화제가 되기도 했다. 오바마의 얼굴을 만들어낸 latent vector에서 입술에 해당하는 부분만 벡터 연산을 통해 산술적으로 대체해주면 얼마든지 창조적으로 얼굴을 조작할 수 있는 것이다.

페이스북에서 개발한 Real-eye-opener가 GAN의 대표적 사례다. Real-eye-opener은 눈을 감은 사진에 가짜 눈을 생성하여 눈을 뜨고 있는 사진으로 만들어주는 기술이다. 입모양을 생성해 오바마 전 대통령의 연설 영상에 합성한 것과 마찬가지로 이번에는 원하는 눈 모양을 latent vector에 반영하여 눈 모양이 대체된 새로운 얼굴 전체를 생성하는 것이다.

참고

https://www.samsungsds.com/kr/insights/gan.html

https://jaejunyoo.blogspot.com/2017/02/deep-convolutional-gan-dcgan-1.html

0804 모각코 3회차

s.e.s — Fri, 4 Aug 2023 20:00:23 +0900

FLUTTER 환경설정

최대/최소 값과 인덱스 찾기

s.e.s — Wed, 2 Aug 2023 15:06:07 +0900

Header: <algorithm>

max_element(first, last)

1. first: 찾고자 하는 시작 범위

2. last: 찾고자 하는 끝 범위

3. 리턴값: iterator(주소가 아닌 값을 얻고 싶으면 * 연산자 붙이기)

사용 예시

maxValue = *max_element(v.begin(), v.end()); // 최댓값
maxIndex = distance(v.begin(), maxValue); // 최댓값 인덱스 구하기 1
maxIndex = max_element(v.begin(), v.end()) - v.begin(); // 최댓값 인덱스 구하기 2

minValue = *min_element(v.begin(), v.end()); // 최솟값
minIndex = distance(v.begin(), minValue); // 최솟값 인덱스 구하기 1
minIndex = min_element(v.begin(), v.end()) - v.begin(); // 최솟값 인덱스 구하기 2