[web] 윈도우10 - 이모지 (Emoji) (입력법 + 웹에 적용)

목차

1. 이모지(Emoji) 소개
2. 이모지(Emoji) 윈도우10에서 입력 방법 ★
3. MySQL 명령어 입력 (= 사전 배경지식 ㅡㅡ;)
4. 이모지(Emoji) 웹적용법1 - 직접 입력방식
5. 이모지(Emoji) 웹적용법2 - 이모티콘 입력방식
6. 이모지(Emoji) 관련 참고주소

 

이모지(Emoji) 소개

스마트폰 등에서 사용하는 그림문자. 

 

---

1.
어원은 아래 일본어에서 유래. (발음은 영어식)

• えもじ[絵文字 emoji] 그림문자

2.

1개당 4byte 차지 (※ utf8mb4 언어셋 DB만 지원)3.

• utf8 (3byte) - 이모지 사용 불가
• utf8mb4 (4byte) - 이모지 사용 가능
• https://homzzang.com/b/server-168

 

 

이모지(Emoji) 윈도우10에서 입력 방법 ★

※ 3가지 방법으로 가능

• Windows 키 + ; (세미콜론)키 
• Windows 키 + . (마침표)키
• 마우스오른쪽버튼 > 그림 이모티콘

 

 

MySQL 명령어 입력 (= 사전 배경지식 ㅡㅡ;)

[방법1] - PUTTY 등 SSH 콘솔 이용

 

1. MySQL 모드로 이동

mysql -u root -p

 

2. 작업할 DB명 선택

use DB명;  (예) use homzzang;

 

---

[방법2] - PhpMyAdmin 이용

 

PhpMyAdmin 로그인 > 좌측에서 작업할 DB선택 > SQL 탭 선택 > 작업할 명령어 입력

 

이모지(Emoji) 웹적용법1 - 직접 입력방식

 

1.

서버 DB를 utf8mb4 설정하기

 

※ 참고1.
utf8mb4_unicode_ci (DB엄격비교, 속도느림) 대신
utf8mb4_general_ci (DB간편비교, 속도빠름) 사용해도 됨.

 

※ 아래 작업은 putty 등 SSH 콘솔 이용해 작업함.

 

1.

DB 설정 변경

 

[MariaDB]

/etc/mysql/conf.d/mariadb.cnf

 

# MariaDB-specific config file.

# Read by /etc/mysql/my.cnf

[client]

default-character-set = utf8mb4

[mysqld]

# * Character sets

character-set-client-handshake = FALSE

character-set-server = utf8mb4

collation-server = utf8mb4_unicode_ci

character_set_server = utf8mb4

collation_server = utf8mb4_unicode_ci

 

 

[MySQL 5.5.3 이상]
/etc/my.cnf

 

[client]

default-character-set = utf8mb4

[mysql]

default-character-set = utf8mb4

[mysqld]

character-set-client-handshake = FALSE

character-set-server = utf8mb4

collation-server = utf8mb4_unicode_ci

character_set_server = utf8mb4

collation_server = utf8mb4_unicode_ci

 

 

2.

DB 재시작

 

service mysql restart

 

 

3.

변경내역 확인하기

1.
MySQL 모드 설정

mysql -u root -p

 

---

2.

MySQL 모드에서 입력
SHOW VARIABLES WHERE Variable_name LIKE 'character\_set\_%' OR Variable_name LIKE 'collation%';

 

※ 아래처럼 나오는지 확인

+--------------------------+--------------------+

| Variable_name            | Value              |

+--------------------------+--------------------+

| character_set_client     | utf8mb4            |

| character_set_connection | utf8mb4            |

| character_set_database   | utf8mb4            |

| character_set_filesystem | binary             |

| character_set_results    | utf8mb4            |

| character_set_server     | utf8mb4            |

| character_set_system     | utf8               |

| collation_connection     | utf8mb4_unicode_ci |

| collation_database       | utf8mb4_unicode_ci |

| collation_server         | utf8mb4_unicode_ci |

+--------------------------+--------------------+

※ 핑크색 부분은 안 바뀌는 게 정상. 자세히 보기

 

2.

사용 중인 UTF8 → utf8mb4 버전으로 전환

 

0.

mysql 버전이 utf8mb4 지원하는지 체크. (※ utf8mb4_general_ci 사용 권장)

(phpMyAdmin 접속해 DB 생성 또는 특정테이블에 컬럼 추가 시, 테이터정렬방식에 utf8mb4 있는지 체크.)

 
※ MySQL 5.5.3부터 utf8mb4 지원

---

1.

[G5 5.4 이상 버전]/config.php 약 40라인 수정수정 전: define('G5_DB_CHARSET', 'utf8');

수정 전: define('G5_DB_CHARSET', 'utf8mb4');

[G5 5.4 미만 버전]

/common.php 약 143라인 수정

수정 전 : sql_set_charset('utf8', $connect_db);

수정 후 : sql_set_charset('utf8mb4', $connect_db);

 

---

2.

※ 테이블의 모든 컬럼을 utf8mb4로 수정하기

ALTER TABLE 테이블명 CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

 
※ 테이블의 글제목과 글내용 컬럼만 utf8mb4로 수정하기

ALTER TABLE `g5_write_게시판ID` CHANGE `wr_subject` `wr_subject` VARCHAR(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL; 

ALTER TABLE `g5_write_게시판ID` CHANGE `wr_content` `wr_content` TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL;

 

※ 아래 방법으로 해도 됨.

phpmyadmin 로그인 

> 좌측에서 작업할 DB 선택 

> 수정할 게시판 테이블 선택 

> 구조 탭 클릭 

> wr_subject 와 wr_content 컬럼의 변경 버튼 클릭
> 데이터정렬방식을 utf8mb4_general_ci 또는 utf8mb4_unicode_ci 선택

 

※ 작업 전 백업 필수 !!

 

---

3.

/adm/sql_write.sql 46라인 수정 (게시판 생성 시, utf8mb4 테이블 생성되게 설정)

수정 전 : ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

수정 후 : ) ENGINE=MyISAM  DEFAULT CHARSET=utf8mb4;

---

 

PS. 

그누보드 설치 경우, 아래 파일도 수정

/install/*.sql 파일 수정

수정 전 : ) ENGINE=MyISAM DEFAULT CHARSET=utf8;

수정 후 : ) ENGINE=MyISAM DEFAULT CHARSET=utf8mb4;

이모지(Emoji) 웹적용법2 - 이모티콘 입력방식

1.

위 직접 입력방식 참고해, utf8mb4 설정 작업

 

---

2.

이모지 유니코드 테이블 참고해, 이모지 입력패널창 생성.
https://apps.timwhitlock.info/emoji/tables/unicode
https://www.unicode.org/emoji/charts/full-emoji-list.html

 

---

3.

이모지 입력패널창 생성할 때, 이모지 유니코드를 웹사용 코드로 전환 필요.

• 수정 전: U+1F601
• 수정 후: 😁  (즉,  U+ 제거 후, 앞에 &#x 붙이고, 뒤에는 ; 붙임)

 

---

4.

에디터의 기존 이모티콘 기능 참고해, 이모지 클릭 시 이모지 코드 적용되도록 작업.

ps.

utf8mb4 설정 작업없이 이모지 코드 적용할 경우, 웹사용 코드로 전환않고 바로 이모지 코드 넣으면 이모지 코드 뒤의 모든 내용이 사라지는 증상 생김.

 

※ 이 방식은 초보자에겐 좀 무리인 작업이니, 초급기능사에게 1~2일 잡고 의뢰맡기세요.

※ 스마트폰에서 바로 입력되도록 하려면, 문자열 치환하는 JS 정규표현식 지식이 필요함.

 

이모지(Emoji) 관련 참고주소

 

이모지 웹적용법

• http://naminsik.com/blog/3149

 

UTF8 --> UTF8MB4

• http://amina.co.kr/bbs/board.php?bo_table=tip&wr_id=3968
• http://amina.co.kr/bbs/board.php?bo_table=tip&wr_id=3625
• https://www.happyjung.com/lecture/2503 

 

윈도우10 이모지

• https://theqoo.net/square/889075049

 

전반적인 상세작업

• https://www.wsgvet.com/bbs/board.php?bo_table=home&wr_id=520