어도비 플래시의 등장과 지원 종료

어도비 플래시는 1995년 처음 등장한 웹사이트에서 실행 되는 것을 목표로 상호작용과 애니메이션, 영상 등의 표현이 가능한 멀티미디어 포맷입니다. 2000년대초 졸라맨이나 마시마로, 뿌까 등의 유명한 플래시 게임과 애니메이션들은 모두 플래시라는 기술로 만들어진 콘텐츠이며, 이 뿐만이 아니라 웹사이트의 메뉴부터 레이아웃을 포함한 모든 요소들을 플래시 파일로 제작하기도 하였습니다. 플래시는 표준 기술은 아니었지만 편리한 제작 도구와 더불어 폭넓은 생태계가 만들어지면서 2000년대 멀티미디어 콘텐츠 시장에 아주 큰 부분을 점령하고 있었습니다.

그러나 브라우저가 진화하고 스마트폰이 보급화 되면서 플래시의 입지는 점차 좁아져갔습니다. 플래시는 최신 브라우저 환경의 빠른 속도에 적합하지 않았으며 너무 많은 시스템 자원을 필요로 했습니다. 뿐만 아니라 보안 취약점이 다수 발견되고 최근에는 플래시 기술을 이용한 랜섬웨어까지 번지면서 결국 플래시의 실행과 기술 지원을 어도비는 물론 브라우저와 운영체제 개발사에서도 종료하기에 이르렀습니다.

이렇게 2021년 1월 1일 부터는 더이상 일반적인 방법으로는 웹브라우저에서 플래시가 실행되지 않게 되었습니다. 앞서 말씀드렸던 플래시만으로 구성된 웹사이트는 먹통이 되어버렸고, 추억의 플래시 콘텐츠는 더 이상 볼 수 없게 되었습니다.

하지만 걱정하지 않으셔도 됩니다. 플래시 콘텐츠가 최신 브라우저와 운영체제에서도 여전히 실행될 수 있도록 하는 다양한 방법이 있으며, 지원 종료에 대비해 새로운 플래시 플레이어(에뮬레이터)들이 개발되고 있기 때문입니다. 이 포스트에서는 2020년 이후에도 플래시 콘텐츠를 실행할 수 있는 방법을 자세히 소개해드리겠습니다.

어도비 플래시 지원 종료에 대한 오해와 진실

플래시 실행 방법을 소개하기에 앞서, 어도비 플래시 플레이어의 지원 종료에 대해 몇가지 잘못 알려진 사실들을 정리해보았습니다.

Q. 2020년 지원 종료 이후, 플래시를 삭제하지 않으면 보안에 취약한가?

꼭 그렇지만은 않습니다. 악성코드가 포함된 플래시 파일을 의도적으로 실행하지만 않는다면 플래시 플레이어가 시스템에 설치되어 있다고 해서 문제가 발생하는 것은 아닙니다. 운영체제와 브라우저를 최신 버전으로 꾸준히 업데이트하는 것을 권장합니다.

Q. 제어판이나 시스템 파일에 플래시 관련된 내용이 있는데 삭제해야 하는가?

최신 운영체제와 업데이트 버전으로 갱신한다면 이에 대해 신경쓰지 않아도 됩니다. 윈도우 10과 11에서는 업데이트만으로도 플래시 관련 파일이 삭제되거나 이로부터 보호할 수 있습니다.

Q. 플래시 콘텐츠를 제공하는 사이트는 모두 폐쇄되는가?

그 것은 웹사이트 관리자에게 달려있습니다. 일부 유명한 플래시 커뮤니티는 자체 또는 타사 에뮬레이터를 활용하여 플래시 실행을 계속 지원하거나, HTML5 기술로 전환하면서 지속적인 지원을 계속 하는 경우도 있습니다.

Q. 플래시를 더 이상 개발할 수 없는가? 플래시를 대체할 기술은 없는가?

플래시는 2022년 기준 여전히 어도비 애니메이트 CC(Adobe Animate CC) 프로그램에서 제작할 수 있습니다. 다만 이미 지원이 종료된 이상 활용할 수 있는 곳이 많지 않으므로 다른 기술로 대체하는 것이 좋습니다. 플래시를 대체할 수 있는 기술은 HTML5와 자바스크립트(JavaScript)를 활용한 게임 및 애니메이션 구현 방법이 있습니다.

최신 브라우저에서 플래시 실행하기

그렇다면 가장 중요한, 최신 브라우저에서 플래시를 실행하는 방법은 무엇이 있을까요? 크게 ‘에뮬레이터 사용하기’와 ‘대체 브라우저 이용하기’ 두가지로 분류할 수 있습니다.

에뮬레이터란 무엇인가요?

에뮬레이터(Emulator)는 특정 시스템이나 하드웨어 환경을 최대한 동일하게 재현한 소프트웨어입니다. 보통 오래된 게임 콘솔 환경을 구현하는 것이 흔하지만, 플래시 포맷에 대해서도 에뮬레이터 개발을 위해 다양한 시도가 이루어지고 있습니다.

에뮬레이터를 사용했을 시의 장점은 다음과 같습니다.

• 최신 운영체제 및 브라우저 환경에서도 실행 가능하도록 지원
• 모바일 환경 지원
• 꾸준한 업데이트와 기존 환경 대비 다양한 향상된 기능 제공
• 과거 보안 문제를 해결하고, 안전한 환경에서 구동

하지만 단점 또한 존재하는데, 가장 큰 문제는 기존 환경을 100% 재현하기에는 어렵거나 오랜 시간이 걸린다는 겁니다. 아직 시중의 플래시 에뮬레이터는 개발 초기 단계이기 때문에 기존의 콘텐츠에 대한 호환성이 아주 좋지는 못합니다. 하지만 이는 시간이 지나면 해결 될 가능성이 큽니다.

[방법 1] 에뮬레이터 사용하기

현재 가장 유명한 플래시 에뮬레이터는 러플(Ruffle) 에뮬레이터가 있습니다. Ruffle은 오픈소스 프로젝트로 활발히 개발이 진행되고 있으며, 현재 약 40-50%에 달하는 플래시 콘텐츠가 원활하게 실행 가능한 수준이 되었습니다.

• 공식 홈페이지 링크: https://ruffle.rs/
• 오픈소스 프로젝트 링크: https://github.com/ruffle-rs/ruffle

이 에뮬레이터를 브라우저에서 사용하려면 크롬이나 파이어폭스 브라우저를 이용하여 확장 프로그램을 설치해주어야 합니다. 확장 프로그램은 데스크톱 환경에서만 지원됩니다.

• Google Chrome용 확장 프로그램: https://chrome.google.com/webstore/detail/ruffle/donbcfbmhbcapadipfkeojnmajbakjdc
• FireFox용 확장 프로그램: https://addons.mozilla.org/ko/firefox/addon/ruffle_rs/

설치 후에는 주소표시줄 우측의 확장 프로그램 아이콘을 클릭하여 ‘Ruffle에서 플래시 콘텐츠 재생하기’를 클릭해 활성화하면 됩니다.

이제 다 되었습니다. 플래시가 제공되는 웹사이트에 방문하기만 하면 기존에 실행이 차단된 플래시 콘텐츠가 정상적으로 실행될 것입니다! (주의: 웹사이트에서 이미 에뮬레이터를 통해 플래시를 지원하는 경우, 확장 프로그램이 정상 동작하지 않을 수 있습니다.)

Ruffle에서 공식적으로 제공하는 것은 데스크톱 앱과 호스팅 버전용 자바스크립트 파일도 있습니다. 데스크톱 앱은 설치 없이 바로 실행하여 로컬 파일을 로드하면 플래시를 즉시 실행할 수 있습니다.

데스크톱 앱은 다음 링크에서 다운로드 가능합니다: https://ruffle.rs/#downloads

이외에도 LightSpark, 와플래시같은 에뮬레이터들이 있지만 호환성이 가장 좋으면서도 직접 설치하여 사용한다는 점에서 현재로서는 Ruffle이 가장 권장됩니다.

[방법 2] 플래시 콘텐츠 사이트 또는 아카이브 이용하기

대부분의 유명 플래시 콘텐츠 제공 사이트는 어도비 플래시 지원 종료에 대비하여 에뮬레이터나 대체 수단을 이미 제공하고 있을 수도 있습니다. 따라서 별도의 작업 없이 플래시 실행이 계속 지원되는 사이트를 방문하시기만 하면 됩니다.

예를 들어 대표적인 해외 플래시 게임 사이트인 뉴그라운드(Newgrounds)는 이미 일부 플래시를 에뮬레이터에서 실행되도록 대체하고 있습니다.

플래시 콘텐츠 사이트가 플래시 지원 종료로 인해 폐쇄되는 경우도 있습니다. 이렇게 과거 콘텐츠가 유실되는 것을 방지하기 위해 다양한 아카이브 사이트도 운영되고 있습니다. 국내에는 플래시아크(FlashArch), 해외에는 플래시포인트(FlashPoint)가 가장 대표적입니다.

아래 대표적인 아카이브 사이트 정리 표로 자세히 비교해보았습니다. (표는 2022.06 기준)

• 플래시아크 링크: https://flasharch.com
• 플래시포인트 링크: https://bluemaxima.org/flashpoint
• Archive.org 링크: https://archive.org/details/softwarelibrary_flash
• 와플래시 링크: https://vidkidz.tistory.com

	플래시아크	플래시포인트	Archive.org	와플래시
한국어 지원
프로젝트 시작	2020-09-21	2018-01	2020-10-27	2020-08-15
플래시 구동 방법	Ruffle	Adobe Flash Player	Ruffle	WaFlash
플랫폼	웹(PC, Mobile), 데스크톱(Windows, macOS, Linux)	데스크톱(Windows, macOS, Linux)	웹(PC, Mobile)	웹(PC, Mobile)
콘텐츠 수	45,000+	100,000+	14,000+	11,000+
국내 콘텐츠
해외 콘텐츠
호환성
검색기능
커뮤니티
자료소장

[방법 3] 대체 브라우저 이용하기 (권장되지 않음)

아직 특정 플래시는 에뮬레이터로 호환되지 않을 수 있습니다. 그 때까지는 기존의 플래시를 현재까지도 지원하는 대체 브라우저를 사용하는 방법도 있습니다.

대표적으로는 Pale Moon과 Puffin 브라우저가 있습니다. Puffin은 부분 유료이기 때문에 Pale Moon 브라우저를 사용하는 것을 권장합니다.

• Pale Moon 브라우저 다운로드 링크: https://www.palemoon.org

설치 후 아래 이미지의 Preferences -> Applications 메뉴에서 플래시 포맷에 대한 플레이어를 별도로 설정할 수 있습니다.

다만 대체 브라우저는 지원 종료된 플래시 기술을 예전 그대로 사용하는 것이므로 권장되는 방법은 아닙니다. 또한 최신 브라우저와 달리 브라우저 자체 기능이 불편하거나 사이트 접속이 느릴 수 있습니다.

로컬 데스크톱 환경에서 플래시 실행하기

앞서 설명드린 방법은 웹사이트를 기준으로 했다면, 로컬 PC에서 브라우저를 사용하지 않고도 플래시를 계속 실행하는 방법을 소개해드리겠습니다. 이 또한 두가지 방법이 있는데, ‘에뮬레이터 앱 설치하기’와 ‘스탠드얼론 플레이어 사용하기’가 있습니다.

[방법 1] 에뮬레이터 앱 설치하기

앞서 언급했던 Ruffle을 포함하여 다양한 데스크톱용 앱이 있습니다. 이외에도 상단에서 언급한 플래시아크 아카이브에서 제공하는 데스크톱용 플레이어나 FlashPoint 런처 프로그램 등이 있습니다.

• 플래시아크 데스크톱 플레이어 다운로드 링크: https://flasharch.com/downloads
• FlashPoint 런처 다운로드 링크: https://bluemaxima.org/flashpoint/downloads

[방법 2] 스탠드얼론 플레이어 사용하기 (권장되지 않음)

마지막으로 Adobe에서 배포한 단일 플레이어 실행 파일을 사용하는 방법이 있습니다. 이를 스탠드얼론(Standalone) 프로그램이라고 부릅니다. 실행 파일(.exe)은 검색으로 쉽게 찾아보실 수 있습니다. 설치는 별도로 하지 않으며 실행 시 로컬 PC 내의 원하는 SWF 파일을 열 수 있습니다.

다만 이 방법 또한 기존의 지원 종료된 플래시 실행 방법을 그대로 사용하기 때문에 프로그램 자체의 호환성이 미래에 중단될 수 있고, 미래에는 보안상 권장되지 않습니다.

이렇게 2020년 이후에도 플래시를 실행하는 방법들을 알아보았습니다. 아직 이전처럼 완벽한 실행을 보장하지는 않지만, 앞으로 꾸준히 기술이 발전하면서 호환성이 나아지기를 기대해 볼 수 있을 것 같습니다.

The post 어도비 플래시 지원 종료 및 대체 플래시 실행 방법 총정리 appeared first on JooTC.

크로미움은 구글에서 공개한 오픈소스 브라우저 엔진입니다. 네이버 웨일(Naver Whale), 오페라(Opera) 브라우저, 삼성 인터넷 브라우저(Samsung Internet Browser) 등이 크로미움 엔진을 기반으로 한 브라우저로서 수많은 브라우저에서 사용할 만큼 성능이 좋습니다.

마이크로소프트의 기존 엣지 브라우저는 윈도우 10의 유니버셜 윈도우 플랫폼(Univeral Window Platform) 기반의 앱으로서 EdgeHTML이라는 엔진을 사용했는데, 윈도우 10이 출시된지 오랜 시간이 지났음에도 엣지의 점유율은 크롬과 IE11에 비하면 저조했을 뿐더러 불편한 점들이 많으 거론되어왔습니다.

그러던 2018년, 마이크로소프트는 자사의 브라우저 엔진을 버리겠다고 선언했으며, 크로미움 엔진과 UWP의 탈출로 기존 엣지의 이미지를 완전히 바꾸겠다고 예고했습니다. 이 내용에 대해서는 다음 포스트에 자세히 설명되었습니다.

크로미움으로 전환되었을 때의 이점은 무엇이 있을까요? 몇가지만 간단히 나열해보겠습니다.

• 여러 운영체제를 지원합니다. 기존의 엣지는 윈도우 10에서만 제공되지만, 이제는 윈도우 7, 윈도우 서버는 물론 macOS까지 지원하게 됩니다.
• 윈도우 10의 업데이트와는 별개로 버전을 가지며, 브라우저 업데이트의 빠른 지원을 받을 수 있습니다.
• 크로미움 엔진의 빠른 속도와 다양한 기능이 제공됩니다.

이렇게 엔진을 탈바꿈하게 되면서 기존의 로고 또한 새롭게 선보였습니다.

새로운 로고는 마이크로소프트의 윈도우 10 부터 고안된 디자인 플루언트 디자인 시스템 (Fluent Design System)의 느낌을 살린 입체감있는 느낌으로 만들어진 듯 합니다. 크로미움 기반이어서 그런지 모르겠지만 구글 크롬 브라우저의 로고와 상당히 유사해보이기도 합니다.

크로미움 엔진이 탑재된 새로운 마이크로소프트 엣지의 정식 출시일은 2020년 1월 15일 입니다. (이 날짜는 공식적으로 발표된 날짜이지만 변동될 수 있습니다.) 아직은 루머이지만 크로미움 버전은 내년에 출시될 윈도우 10의 새로운 메이저 업데이트인 20H1(코드명)에 기존 엣지에서 교체될 것으로 보입니다.

현재 크로미움 기반의 엣지 브라우저는 아래 링크에서 체험해보실 수 있습니다.

https://www.microsoftedgeinsider.com/ko-kr/download

The post 마이크로소프트 엣지, 크로미움 버전 2020년 1월 출시 appeared first on JooTC.

마이크로소프트 엣지(Microsoft Edge)는 윈도우 10 부터 기본으로 탑재된 유니버셜 앱(UWP)으로 만들어진 인터넷 브라우저입니다. 간단하고 직관적인 인터페이스이며 터치 동작은 물론 서피스 펜이나 펜을 지원하는 다양한 장치에서 캡처 후 즉시 그리기 작업을 가능하게 하는 등의 태블릿 친화적인 사용성을 가지고 있습니다.

기존의 경쟁 브라우저와는 다르게 윈도우 10에서만 실행할 수 있다는 점과 공식 출시된지가 어느덧 3~4년이 흘러가는데도 부족하고 불안정한 부분이 많아 실질적인 사용자는 구글 크롬(Google Chrome)이나 인터넷 익스플로러 11(Internet Explorer 11)에 여전히 뒤쳐지는 인지도를 가지고 있습니다.

엣지는 웹 개발자를 포함, 일반 사용자에게도 기존의 웹 사이트에 대한 호환성이 영 좋지 못할 뿐 더러 다중 작업에 있어서 엣지는 초라한 퍼포먼스와 다양한 문제점을 보여주곤 했습니다.

또한 구글 크롬의 압도적인 확장 프로그램 생태계는 엣지가 도저히 따라잡을 수 없는 수준이 되가면서 여전히 사용자들은 기본 브라우저를 쉽게 변경할 수가 없었습니다. (그래도 태블릿 PC나 라이트 유저에게는 크롬보다 엣지를 추천하는 사용자가 점점 늘어나고 있는 추세이긴 합니다. 애초에 크롬이 많은 시스템 자원을 사용해서 크롬보다는 가볍게 돌아가는 브라우저로서는 제격이기 때문이죠.)

브라우저 엔진이 크로미움(Chromium)으로 교체 될 것

For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re announcing that we intend to adopt the Chromium open source project in the development of Microsoft Edge on the desktop to create better web compatibility for our customers and less fragmentation of the web for all web developers.
– Windows Experience Blog에서 인용, https://blogs.windows.com/windowsexperience/2018/12/06/microsoft-edge-making-the-web-better-through-more-open-source-collaboration/

그러다 2018년 12월 6일, 마이크로소프트 공식 블로그에서 엣지 브라우저의 렌더링 엔진을 기존의 EdgeHTML에서 크로미움(Chromium)으로 공식적으로 대체할 것이라고 언급되었습니다.

마이크로소프트 엣지는 EdgeHTML이라는 자체 개발 렌더링 엔진을, 자바스크립트는 차크라(Chakra) 엔진을 사용합니다.  (물론 이는 PC에 한정되었으며 iOS나 안드로이드에서는 EdgeHTML 대신 WebKit이나 Blink 엔진을 사용합니다.)

크로미움은 오픈소스로 개발 중인 브라우저 엔진이며 대표적인 브라우저는 구글 크롬, 오페라(Opera), 비발디(Vivaldi) 등이 있습니다. 크로미움 기본 소스로만 구성된 크로미움 브라우저도 있으며 이는 구글과 관련한 기능(확장 프로그램, 로고 등)이 제거된 버전이기도 합니다.

어떻게 적용되는지와 변경되는 구체적인 일정은 정해지지 않았으나 2019년에 진행될 것으로 예측하고 있습니다.

엔진을 교체하면 무엇이 좋아지는가?

우선 크로미움은 오픈소스로 활발하게 개발되고 있습니다. 이를 활용한 브라우저 또한 다양하고 누구나 프로젝트에 참여할 수 있기 때문에 개발 속도가 빨라지고 프로그램의 퀄리티가 비약적으로 좋아질 수 있을 것입니다.

웹페이지 호환성 측면에서도 구글 크롬과 동일한 수준이 될 것이며 엣지 개발자들이 엔진에 시간을 할애하지 않아 엣지 브라우저에 대한 조금 더 빠른 개발이 가능하지 않을까 싶습니다.

아직 정확하게 결정된 사항은 아니지만, 확장 프로그램 스토어에서도 구글 크롬의 확장 프로그램을 사용할 수 있을 것으로도 기대됩니다.

가장 중요한 점은 기존의 EdgeHTML을 사용함으로서 불가능했던 다른 운영체제로의 출시가 이제 어느정도 가능해졌다는 것입니다. 물론 유니버셜 앱 형식으로는 나오기 힘들겠지만, 크로미움 엔진을 사용하면 윈도우 7이나 윈도우 8.1은 물론, macOS나 리눅스 운영체제에서도 엣지를 사용할 수 있을 것이라는 가능성이 생겼습니다.

엣지 브라우저의 점유율을 높이기 위한 마이크로소프트의 앞으로의 행보가 기대됩니다. 어서 빨리 크로미움 엔진이 적용된 엣지 브라우저를 만나보게 되었으면 좋겠습니다.

참고자료

• Microsoft Edge Wikipedia : https://en.wikipedia.org/wiki/Microsoft_Edge
• Microsoft Edge 공식 홈페이지 : https://www.microsoft.com/ko-kr/windows/microsoft-edge

The post 마이크로소프트 엣지 브라우저 엔진, 크로미움(Chromium)으로 교체 appeared first on JooTC.

구글 크롬 브라우저 리눅스 설치 방법

구글 크롬 (Google Chrome)은 빠른 퍼포먼스와 다양한 확장 프로그램, 편리한 동기화 기능이 제공되는 브라우저입니다.

간혹 웹 서비스를 테스트하거나 메인 운영체제가 리눅스인 경우 필요에 따라서 파이어폭스(Firefox) 브라우저 보다는 구글 크롬을 설치하고 싶은 경우가 있습니다.

구글 크롬은 apt와 yum과 같은 패키지 관리자로는 설치할 수 없습니다. 따라서 다운로드 및 설치를 하려면 아래의 방법을 따라야 합니다.

시작하기 전에 – Chromium Browser로 설치

주의: 크로미움 브라우저 설치는 권장되지 않는 사항입니다.

패키지 관리자로 간편하게 설치하고자 할 경우 Google Chrome 브라우저가 아닌 크로미움(Chromium) 브라우저로 설치할 수 있습니다. 이는 크롬보다 앞서 나오는 브라우저이며 크롬의 기능의 일부만 지원하지 않는 껍데기격의 브라우저입니다.

다만 크로미움 브라우저는 기존의 크롬 브라우저보다 안정성이 좋지 않을 뿐 더러 자동 업데이트나 확장 기능에 제한이 있을 수 있으므로 이를 설치하는 것 보다는 차라리 파이어폭스 브라우저를 사용하는 것이 좋을 수도 있습니다.

패키지 설치는 간단합니다. 아래 명령어를 사용하여 설치하여주세요.

Ubuntu 또는 Debian 계열

[root@localhost ~]# apt install chromium-browser

CentOS 또는 RedHat 계열

[root@localhost ~]# yum install chromium-browser

Google Chrome 다운로드

설치 패키지를 다운로드 하기 위해선 직접 홈페이지에서 다운로드 파일을 받거나 wget 명령어를 사용하는 두 가지 방법이 있습니다.

주의 – 32비트 버전은 2016년 부터 지원이 종료되었습니다. 가능하면 64비트 버전을 다운로드 및 설치해주시기 바랍니다.

방법 1 – 홈페이지에서 다운로드

아래 페이지로 이동하여 Google Chrome을 받을 준비를 합니다.

https://www.google.com/intl/ko_ALL/chrome

홈페이지로 이동했다면 하단으로 스크롤을 내려주세요. 전체 링크 모음에 있는 ‘Chrome 제품군 – 기타 플랫폼’을 클릭합니다.

(만약 현재 운영체제가 Linux인 경우 상단의 Chrome 다운로드 버튼만 눌러도 됩니다.)

Chrome 다운로드 패널이 열리면 하단의 ‘기타 데스크톱 OS용 다운로드’ 항목에 있는 Linux를 선택해주세요.

현재 리눅스 운영체제에 맞는 패키지 파일 타입을 선택합니다. 예를 들어 Ubuntu인 경우 .deb 파일을 다운로드해야 합니다. 패키지를 선택한 후 하단의 ‘동의 및 설치’를 클릭하여 다운로드를 진행합니다.

방법 2 – wget을 사용하여 다운로드

wget 명령어를 사용하여 터미널에서 바로 패키지 설치 파일을 다운로드할 수 있습니다.

Ubuntu 또는 Debian 계열

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

CentOS 또는 RedHat 계열

wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm

다운로드받은 패키지 설치하기

rpm 또는 deb 패키지를 다운로드받았습니다. 이제 이 패키지 설치 파일을 사용하여 구글 크롬을 설치해보겠습니다.

rpm 패키지인 경우

[root@localhost ~]# rpm -ivh google-chrome-stable_current_x86_64.rpm

그러나 위 패키지 설치 시 의존성 패키지 또한 별도로 설치해야 하기 때문에 번거로울 수 있습니다.

rpm 명령어 대신 yum 명령어로 의존성 패키지와 같이 설치할 수 있습니다.

[root@localhost ~]# yum install google-chrome-stable_current_x86_64.rpm

deb 패키지인 경우

dpkg 명령어를 사용하여 deb 파일을 설치합니다.

[root@localhost ~]# dpkg -i google-chrome-stable_current_amd64.deb

사용 방법

다음 명령어로 브라우저를 실행할 수 있습니다. (가급적이면 root 계정으로는 실행하지 말아주세요.)

$ google-chrome-stable
또는
$ google-chrome

이제 구글 크롬이 정상적으로 실행될 것입니다.

The post 리눅스 구글 크롬 브라우저 설치 방법 (Google Chrome on Linux) appeared first on JooTC.

이 스크립트는 브라우저의 창을 전체화면으로 전환하도록 합니다.

사용 시 주의사항

전체화면으로 전환하는 함수는 강제로 호출될 수 없습니다. 이를 실행할 경우 브라우저는 경고를 출력하며 진행하지 않으려 할 것입니다.

원활하게 실행하려면 사용자의 선택권이 주어져야 합니다. 예를 들면 버튼 클릭 시 함수 실행으로 해당 함수가 ‘강제로’ 호출되지 않도록 해주세요.

자세한 내용은 하단의 포스트를 참고해보세요.

Failed to execute ‘requestFullscreen’ on ‘Element’ 해결하기

사용 방법

아래의 코드를 참고합니다.

var docV = document.documentElement;
// 전체화면 설정
function openFullScreenMode() {
    if (docV.requestFullscreen)
        docV.requestFullscreen();
    else if (docV.webkitRequestFullscreen) // Chrome, Safari (webkit)
        docV.webkitRequestFullscreen();
    else if (docV.mozRequestFullScreen) // Firefox
        docV.mozRequestFullScreen();
    else if (docV.msRequestFullscreen) // IE or Edge
        docV.msRequestFullscreen();
}

// 전체화면 해제
function closeFullScreenMode() {
    if (document.exitFullscreen)
        document.exitFullscreen();
    else if (document.webkitExitFullscreen) // Chrome, Safari (webkit)
        document.webkitExitFullscreen();
    else if (document.mozCancelFullScreen) // Firefox
        document.mozCancelFullScreen();
    else if (document.msExitFullscreen) // IE or Edge
        document.msExitFullscreen();
}

해당 함수를 버튼의 onclick 속성 또는 a 태그의 링크 등으로 설정합니다.

참고자료

• How TO – Fullscreen : https://www.w3schools.com/howto/howto_js_fullscreen.asp

The post JavaScript 브라우저 창을 전체화면으로 전환하는 스크립트 appeared first on JooTC.

구글 크롬(Google Chrome) 브라우저 버전 69 업데이트가 2018년 9월 4일 진행되었습니다. 구글 크롬은 아주 높은 사용자 점유율을 가지고 있는 인터넷 브라우저입니다. 빠른 브라우징 속도와 직관적인 인터페이스로 웹서핑은 물론 다양한 작업과 디버깅에 있어서 인터넷 익스플로러보다 우세한 면모를 보여주기도 하였습니다.

근래에 들어서는 엣지(Edge), 비발디(Vivaldi), 새로 탈바꿈한 파이어폭스 퀀텀(Firefox Quantum)까지 다양하고 혁신적인 브라우저들이 속속히 출시되고 있어 크롬의 점유율이 예전만큼은 아닐지 모르겠지만, 여전히 크롬의 친화력은 누구도 따라올 수 없을 정도입니다.

사용자 인터페이스를 새롭게 업데이트

이번 업데이트에서는 인터페이스를 전체적으로 탈바꿈하는 변화가 일어났습니다. 상단 바가 전체적으로 둥글어졌고 부드러워진 느낌으로 바뀌었습니다.

탭 또한 기존의 사다리꼴 탭 모양에서 둥근 탭으로 바뀌었습니다. 활성화되지 않은 탭은 투명하게 처리하여 현재 클릭된 탭을 더욱 명확하게 보여줍니다.

새 탭 페이지의 모습도 둥글게 바뀌었으며 기존의 페이지 미리보기 대신 해당 홈 페이지의 아이콘으로 표시됩니다.

브라우저의 업데이트 내용은 아니지만 이번 업데이트에 맞추어 Chrome 웹 스토어의 모습도 새롭게 단장했습니다. 기존의 스타일을 버리고 구글 디자인 철학에 맞는 스타일로 구성되었으며 가로폭이나 고해상도에 맞춘 페이지 보기로 최적화가 이루어진 것 같습니다.

구글 크롬 업데이트 내역 (69.0.3497)

• 많은 버그와 오류 수정 및 개선이 이루어졌습니다.
• 새로운 브라우저 인터페이스로 변경되었습니다.
• CSS Scroll Snap을 사용하여 매끄러운 스크롤 환경을 만들 수 있습니다.
• Display Cutouts(디스플레이 컷아웃)을 사용하여 화면 컷 아웃 뒤의 간격(notch로 부름)을 포함하여 화면의 전체 영역을 사용할 수 있습니다.
• Web Locks API를 사용하여 비동기적으로 잠금을 획득하고 작업이 수행되는 동안 잠금을 유지 한 후 해제 할 수 있습니다.
• CSS4 스펙에서 원뿔 그라디언트를 사용하여 원주 둘레에 색상 변이를 만들 수 있습니다.
• Elements에 대한 새로운 toggleAttribute() 메소드는 classList.toggle()과 비슷한 속성의 존재를 토글합니다.
• 자바 스크립트의 배열의 새로운 메소드를 지원합니다 : flat()과 flatMap()
• OffscreenCanvas는 메인 스레드에서 Worker로 작업사항을 옮겨 성능 면에서 발생하는 병목 현상을 제거합니다.

참고자료

• Google Chrome Update History : https://en.wikipedia.org/wiki/Google_Chrome_version_history

The post 구글 크롬 업데이트 출시, 브라우저 인터페이스 전면 개편 appeared first on JooTC.

주의: 이 포스트는 구형 엣지(Edge) 브라우저를 기준으로 작성되었으며 현재는 원활하게 동작하지 않을 수 있습니다.

Windows 10의 엣지(Edge) 브라우저를 사용한다면, 매번 주소 표시줄에 검색을 하면 빙(Bing) 검색 엔진으로 검색됩니다.

Bing은 마이크로소프트(Microsoft)가 개발 및 운영하는 검색 엔진입니다. 때문에 자신들의 운영체제인 Windows 10, 그리고 자신들의 브라우저인 엣지 브라우저에서 만큼은 기본 검색 엔진을 Bing으로 설정하여 사용자 층을 조금이나마 늘리려는 마이크로소프트의 전략이라고 볼 수도 있겠습니다. 개인적으로는 Bing을 별로 좋아하지 않고 구글(Google) 검색엔진을 선호하는 스타일이 때문에 Edge를 쓰다보면 주소 표시줄에 검색어가 아닌 www.google.com 부터 입력하고는 합니다.

물론 엣지 브라우저에서도 기본 검색 엔진을 변경할 수 있습니다. 구글이나 네이버, 다음 등의 검색 포털 모두 가능하지만 방법이 쉽지만은 않습니다.

지금부터 엣지 브라우저 기본 검색 엔진을 변경해보겠습니다.

엣지 브라우저 기본 검색 엔진 변경 방법

먼저 검색 엔진을 변경하기 위해서 엣지 브라우저를 실행합니다.

다음으로 설정할 검색 엔진의 주소의 홈페이지로 연결합니다. 이 과정을 진행하는 이유는 Edge가 검색 엔진을 확인하기 위한 과정(인식)을 해주어야만 변경할 검색 엔진 리스트에 해당 검색 엔진이 노출되기 때문입니다.

예를 들어 검색 엔진이 Naver인 경우 네이버의 홈 주소 (www.naver.com)를, 구글이라면 www.google.com을 입력하여 각 검색 사이트의 홈 페이지로 접속해주세요.

다음으로 엣지 브라우저의 설정 창을 열어야 합니다. 브라우저 우측 상단의 더 보기 버튼( ··· ) 을 클릭해줍니다.

이제부터 Windows 10의 버전에 따라 엣지 브라우저 설정 화면이 다르게 보일 수가 있습니다.

윈도우 10의 버전은 아래 포스트에서 살펴볼 수 있습니다.

• Windows 10 버전 정보 확인 방법 알아보기

Windows 10 1809 이전 (Edge 버전 ~ 42.17134)

먼저 Windows 10의 버전이 2018년 8월 이전에 업데이트 된 1803 이전인 경우입니다.

더 보기 버튼을 클릭하여 메뉴가 열리면 하단의 설정을 클릭합니다.

설정이 열리면 메뉴를 아래로 스크롤하여 맨 아래쪽의 고급 설정 보기가 있습니다. 이 메뉴를 클릭합니다.

이후 스크롤을 조금 내리면 중반부에 ‘주소 표시줄에서의 검색에 사용’ 이라는 항목이 존재할 것입니다.

이 항목에서 현재 검색 엔진이 Bing임을 확인할 수 있습니다. 여기서 검색 엔진 변경을 클릭합니다.

검색 엔진 변경 패널이 열리면 방금 전에 검색하셨던 검색 엔진이 목록에 나타날 것입니다.

해당 검색 엔진을 클릭하여 선택한 후에,  ‘기본 값으로 설정’을 클릭합니다.

이제 Google이 기본 검색 엔진으로 지정되었습니다. 한 번 확인해보겠습니다.

주소 표시줄에 임의의 검색어를 입력하면 추천 검색란 우측에 ‘Google 검색’ 으로 보이는 것을 알 수 있습니다. 여기에 제대로 표시되지 않는다면 해당 검색어를 실제로 검색하여 해당 검색 엔진으로 검색되는지 확인해봐야 합니다.

Windows 10 1809 이후 (Edge 버전 44.17744~)

다음으로 Windows 10의 버전이 2018년 8월 이후에 업데이트 된 1809 이상의 버전인 경우입니다.

더 보기 버튼으로 메뉴가 열렸다면 위와는 다르게 아래와 같은 정리 된 메뉴로 보일 것입니다. 마찬가지로 설정을 클릭합니다.

설정이 열리면 ‘고급’ 항목에서 주소 표시줄 검색 항목의 검색 공급자 변경을 클릭합니다.

검색 엔진 변경 패널이 열렸습니다. 이전에 열었었던 검색 엔진 중 기본으로 설정할 엔진을 선택한 후에,  ‘기본 값으로 설정’을 클릭합니다.

Google이 기본 검색 엔진으로 지정된 것을 확인할 수 있습니다.

주소 표시줄에 임의의 검색어를 입력하여 추천 검색란 우측에 ‘Google 검색’ 으로 보이는 것을 확인합니다.

만약 아래 처럼 나타나지 않는다면 해당 검색어를 실제로 검색하여 해당 검색 엔진으로 검색되는지 확인해봅니다.

이제 Edge 브라우저에서도 원하는 검색 엔진으로 검색하실 수 있습니다.

The post 엣지 브라우저 기본 검색 엔진 변경 방법 알아보기 appeared first on JooTC.

HTML 확인 취소 창 띄우기

HTML 자바스크립트 코드를 사용하여 웹 페이지 경고 창을 띄울 때 ‘확인’ 그리고 ‘취소’ 버튼을 생성할 수 있습니다.

일반 경고 창은 JavaScript의 alert 함수를 사용하여 브라우저에서 경고를 띄울 수 있습니다. 사용 예시는 아래와 같습니다.

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/javascript">
            alert("alert를 사용한 경고 창 예시");
        </script>
        ...
    </head>
    ...
</html>

alert() 사용 결과는 다음과 같습니다.

여기에서는 확인 버튼만 존재하기 때문에 경고 창이 띄워진 후의 이후 동작이 있다면 무조건 해당 동작을 처리하게끔 되어 있습니다.

이번에는 확인 뿐만 아니라 경고 창이 띄워질 때 특정한 동작을 취소를 할 수 있도록 해보겠습니다.
JavaScript에서는 confirm 함수를 사용하면 확인 동작과 취소 버튼의 값을 읽을 수 있습니다. 쉽게 말하면 확인했을 때의 동작과 취소했을 때의 동작을 구분할 수 있도록 두 개의 버튼을 만드는 것입니다.

다음 예시를 살펴보세요:

<!DOCTYPE html>
<html>
    <head>
        ...
        <script type="text/javascript">
            if (confirm("이 버튼에 대한 동작을 수행합니다. 계속합니까?")) {
                // 확인 버튼 클릭 시 동작
                alert("동작을 시작합니다.");
            } else {
                // 취소 버튼 클릭 시 동작
                alert("동작을 취소했습니다.");
            }
        </script>
        ...
    </head>
    ...
</html>

confirm() 함수의 반환 값은 확인은 true, 취소는 false가 됩니다.

이렇게 해서 경고 창을 이용한 사용자 지정 동작을 구성할 수 있습니다.

The post [HTML] 확인 취소 창 띄우기 (경고 창에 확인 버튼) appeared first on JooTC.

HTML 태그에서는 b 태그 외에도 strong 태그가 있는데, 이 태그 역시 텍스트 강조를 할 때 사용합니다.

그렇다면 이 두가지 태그에는 어떠한 차이점이 있을까요?

HTML b, strong 태그 차이

b 태그와 strong 태그는 모두 텍스트를 강조하는 역할을 합니다. 기존 텍스트를 진하게 보이도록 볼드 처리를 합니다.

아래 예제를 살펴보겠습니다.

b 태그를 사용할 때와 strong 태그를 사용할 때의 결과가 두 태그 모두 진하게 강조됨으로서 똑같이 보이는 것을 알 수 있습니다. 사실 상 텍스트를 강조할 때는 b 태그던 strong 태그던 크게 상관이 없어보입니다.

하지만 이 두 태그의 사용 용도는 크게 다릅니다.

먼저 b 태그는 단순히 텍스트를 진하게 표시하는 역할만 합니다. 따라서 서식상 다른 텍스트와 대비된 스타일로 강조를 하고 싶을 때 b 태그를 사용합니다.

strong 태그는 단순히 보여지는 강조가 아닌 실제로 페이지 내의 중요한 부분으로 브라우저에게 알려주는 역할을 합니다. 브라우저가 strong 태그를 해석할 때 페이지 내에서 중요한 부분으로 이해하며, 이는 브라우저에서 지원되는 웹 접근성(Web Accessibility)에 큰 기여를 합니다.

브라우저 또는 운영체제에서의 스크린 리더(Screen Reader)를 사용하는 경우, 음성 합성(Speech Synthesizer) 도구가 페이지를 해석하고 읽어낼 때 strong 태그에 대해 거센 억양으로 음을 낼 수 있도록 하여 실제로 말할 때의 강조를 하듯이 재구성할 수 있게 됩니다.

따라서 특정한 텍스트에 대해 실제로도 강조하고자 하는 경우 strong 태그를, 단순히 굵게만 보이도록 하려면 b 태그를 사용하면 됩니다.

이는 i (italic) 태그도 동일하게 작용합니다. i 태그는 기울임을 나타내는데, em (emphasized) 태그를 사용하면 실질적인 강조를 의미하게 됩니다. 마찬가지로 스크린 리더에도 영향을 미칩니다.

The post [HTML] b 태그와 strong 태그의 차이 알아보기 appeared first on JooTC.

자바스크립트가 차단되었는지 확인

대부분의 웹사이트는 사이트의 동적인 부분을 처리할 때 자바스크립트(JavaScript)를 사용합니다. 이러한 자바스크립트를 특정 목적으로 강제 차단하는 경우가 있습니다.

예를 들면 다음과 같습니다.

• 브라우저 내 설정(또는 개발자 콘솔)에서 자바스크립트를 강제로 차단시킨 경우
• 자바스크립트를 차단하는 확장 프로그램을 사용하는 경우
• 자바스크립트의 최신 버전을 지원하지 않는 구버전의 브라우저를 사용하는 경우

만약 개발자 콘솔에서 자바스크립트를 끄는 옵션에 체크가 되어있을 경우, 아래 방법으로 자바스크립트를 켤 수 있습니다. (구글 크롬 브라우저 기준)

1. 더 보기 버튼 – Settings 메뉴를 클릭합니다.

   

2. ‘Disable JavaScript’ 항목에 체크가 되어 있을 경우 체크를 해제합니다.

   

사이트별로 자바스크립트가 차단된 경우도 있는데, 이에 대해서는 아래 Flash 콘텐츠 항목에서 안내하는 설정 변경을 참고해주세요.

Flash 콘텐츠가 차단되었는지 확인

오래된 웹사이트의 경우 아직까지 플래시 콘텐츠를 사용하기도 합니다. 이제 더 이상 브라우저에서는 호환성 및 보안적인 문제로 인해 기본값으로 플래시 콘텐츠를 표시하지 않을 수 있습니다. 아래 포스트를 참고해보세요.

• 어도비 플래시 플레이어 지원 2020년에 종료된다

플래시를 꼭 사용해야 한다면 PC의 브라우저에서 임시로 콘텐츠를 허용하는 옵션이 있습니다.

먼저 플래시가 차단되면 아래와 같이 보일 것입니다.

이 부분을 클릭하면 위 주소표시줄에서 다음과 같이 표시됩니다. ‘허용’ 을 클릭하여 해당 사이트에 대한 Flash 실행 권한을 허용합니다.

주의 : 플래시 콘텐츠는 2020년 이후로 업데이트 지원이 중단되므로 더 이상 안전하지 않을 수 있습니다. 신중하게 선택해주세요.

만약 위와 같이 Flash 차단 안내가 보이지 않는다면, 아래 방법을 시도해보세요.

1. 주소 표시줄의 주소 왼쪽의 버튼을 클릭합니다. 이후 ‘사이트 설정’ 을 클릭합니다.

   

2. 해당 사이트의 권한 중 ‘Flash’ 항목에서 ‘요청(기본값)’을 ‘허용’ 으로 지정합니다. 여기에서 상술했던 자바스크립트가 차단된 경우도 있을 것입니다. 차단된 경우 마찬가지로 ‘허용(기본값)’ 으로 변경해주시면 됩니다.

   

AdBlock 또는 광고차단 스크립트 해제

대부분의 이유는 콘텐츠 차단 스크립트가 웹 콘텐츠의 정상적인 표시를 방해함으로서 발생합니다. AdBlock과 같은 광고차단 스크립트는 사이트의 특정 요소를 가리거나 동작하지 못하게 할 수 있습니다. 광고를 차단해준다는 장점이 자칫 다른 콘텐츠까지 제거할 수 있다는 단점으로도 이어질 수 있습니다.

아래는 Adblock Plus의 광고 차단 임시 해제 방법입니다. Chrome의 경우 상단의 우측 바에 표시되는 ‘ABP’ 아이콘을 클릭한 다음 ‘이 사이트에서 광고 차단을 사용합니다’ 를 클릭하여 체크를 해제하세요. ‘이 사이트에서 광고 차단을 사용 중지합니다.’ 라고 뜬다면 콘텐츠 차단이 해당 사이트에서 해제됩니다.

기타 – 웹페이지 자체의 문제

위 상황 이외에도 단지 웹사이트 자체의 호환성 문제이거나 자체적 결함으로 인해 문제가 발생할 수 있습니다.

이에 대해서 검증하려면 아래 방법을 시도해보세요.

• 다른 장치 또는 브라우저에서 테스트를 해봅니다.
• 네트워크 연결이 원활하지 않은지 확인해봅니다.
• 백신 프로그램이 일부 포트에 대해 차단(웹 방화벽)하지 않았는지 확인합니다.

위 방법을 시도해도 문제가 해결되지 않으면 해당 웹사이트의 관리자나 개발자에게 문의를 요청해야 할 것입니다.

The post 특정 웹사이트의 버튼을 클릭 할 수 없거나 보이지 않는 경우 appeared first on JooTC.