본문 바로가기

UX 개발/개발도구와 환경

내부망 PC(오프라인)에서 최신 버전 크롬 다운로드 및 설치하기 크롬 기본 인스톨러는 인터넷에 연결되어 있을 때에만 정상설치가 됩니다. 내부망 PC와 같이 오프라인 환경에서 크롬 설치가 필요한 경우에는 크롬에서 별도로 제공하는 스탠드얼론(Stand Alone) 버전의 인스톨러를 운영체제에 맞게 선택하여 설치파일을 다운받은 후, 해당 파일을 대상 PC로 옮겨 설치하시면 됩니다. 크롬 오프라인 버전 설치 파일 사이트 오프라인 설치를 위해서는 스탠드얼론 다운로드 페이지 접속이 필요합니다. 기존 다운로드 사이트와 똑같아 보이지만, 다운로드 받을 때에 다른 파일이 받아집니다. 또한 최신버전의 크롬으로 다운로드가 진행됩니다. 해당 설치파일 다운로드 후 설치희망 PC에 설치파일을 옮겨 설치를 진행하시면 됩니다. 크롬 스탠드얼론 설치파일: https://www.google.com/..
아이폰(iOS) 가상머신으로 모바일웹 테스트 환경 구축하기 모바일웹 개발의 경우 데스크탑용 브라우저에서 제공하는 반응형 브라우저 확인 기능을 통해서 가장 많이 진행이 되지만, 실제 모바일 기기에서의 실행환경과는 다소 차이가 있습니다. 실제 기기를 구비하여 실행환경을 구축하는 것이 가장 이상적일테지만, 현실적인 제약이 있기에 가상머신을 통한 테스트도 효율적으로 활용할 수 있습니다. 가상머신 모바일웹 테스팅의 이점 : 최대한 유사한 실행환경 확인 + 과거 버전 환경 확인 가상머신을 통한 모바일웹 테스팅 환경을 구축하는 것의 이점은, 최대한 실제 기기 구동환경과 유사한 실행환경을 확인할 수 있다는 점 외에도 과거 OS와 브라우저 버전에 대한 테스트를 진행할 수 있다는 점입니다. 특히 모바일 사파리의 경우 버전에 따라 다양한 버그와 버전 비호환성을 내재하고 있기 때문에..
아이폰으로 모바일웹(사파리) 개발자 모드 디버깅 환경 구축하기 크롬을 통해서 안드로이드 기기의 모바일웹 디버깅 환경이 구축한 것처럼, 사파리를 통해서 아이폰의 모바일웹 디버깅 환경 또한 구축이 가능합니다. 다만 사파리의 경우 맥에서만 구동되는 어플리케이션이기 때문에 맥 기기를 통해서 진행하셔야 합니다. 윈도우용 사파리가 과거에 있었기 때문에, 윈도우에서도 사파리 구동이 가능하다고 생각하는 경우가 있는데 해당 버전은 2011년 이후로 지원이 끊긴, 사장된 어플리케이션입니다. 사파리는 맥과 iOS 전용 어플리케이션입니다. 1. 맥 컴퓨터 사파리에서 개발자 도구 활성화 사파리의 옵션 메뉴에서 개발자 도구를 활성화합니다. 2. 아이폰 또는 iOS 기기 사파리에서 Web Inspector 활성화 설정 메뉴의 사파리, 그리고 고급 기능 중 Web Inspector를 활성화합니..
안드로이드 기기로 모바일웹(크롬) 개발자 모드 디버깅 환경 구축하기 데스크탑 컴퓨팅 환경에서 제작된 개발산출물은 모바일 컴퓨팅 환경을 정확하게 시뮬레이션하지 못합니다. 그런 이유로 가장 확실한 모바일웹 디버깅 환경을 구축하는 방법은 모바일 기기를 통해서 디버깅을 하는 것입니다. 안드로이드 기기의 경우 크롬 웹브라우저를 통해 맥이든 윈도우든 상관 없이 쉽게 디버깅 환경을 구축할 수 있습니다. 유선 케이블을 이용하지 않고 무선으로 연결하거나, 크롬 외 다른 브라우저로도 모바일웹을 디버깅할 수 있는 방법은 별도로 존재하니, 해당 내용 확인이 필요한 경우에는 별도 리서치를 추가적으로 진행하시기를 권장 드립니다. 1. 안드로이드 기기의 개발자 모드 활성화하기 안드로이드 설정에 들어가서 개발자 옵션 메뉴에 진입해 USB 디버깅 기능을 활성화합니다. 더불어 원활한 디버깅 환경 구축을..
[MacOS] 언어전환(한영전환) 단축키 shift + space로 변경하기 2022년 07월 07일 추가 내용: 최신 MacOS 버전 업그레이드 이후 아래 기재한 Shift를 통한 키맵핑 방법은 작동하지 않습니다. 다른 키보드 맵핑 프로그램을 활용하거나, 시스템 설정을 변경하는 등의 방법을 취해야 합니다. 2016년경부터 맥OS에서 언어전환 단축키 기본값은, 영문의 대문자 고정용으로 사용되던 CAPS LOCK키가 사용되기 시작했습니다. 버튼의 위치나 크기는 큼직해서 누르기 좋아 보일 수 있으나, 어떤 이유에서인지 CAPS LOCK키를 사용하는 경우에는 언어전환에 있어서 딜레이가 발생하는 이슈가 있었습니다. 이것은 아마 오래 누르고 있으면 대문자 고정 기능을 수행해야 되는 기능 중복으로 인한 문제가 아닌가 싶습니다. 그래서 예전부터 사용되어 오던 CMD + Space 나 CTRL..
[MacOS] 프리뷰 앱으로 이미지 사이즈 조절하기 이미지의 직접 편집보다 사이즈만을 수정하는 경우는 굉장히 빈번하게 발생합니다. 이런 경우 이미지 리사이징만을 위해 포토샵을 켜는 것도 다소 리소스를 과잉하는 것이라고도 볼 수 있습니다. 물론 포토샵을 통해서 이미지 리사이징을 하면 리사이징 방식에서부터 압축율 최적화 등에까지 상세한 설정이 가능합니다. 다만 인스턴트하게 이미지 리사이징만을 하는 경우라면 맥에서는 기본 이미지 뷰어 앱은 프리뷰에서 쉽게 할 수 있습니다. 이미지를 프리뷰 앱을 통해서 실행한 후 Tools 메뉴에서 Adjust Size... 메뉴를 확인하실 수 있습니다. 이 메뉴를 통해서 DPI까지 설정할 수 있는 등 비교적 상세하게 이미지 리사이징 옵션을 설정할 수 있습니다. 별도의 써드파티 앱을 설치하지 않고 이미지 리사이징을 간단하게 수행..
[VSCode] 화면을 나누어서 파일 열기 및 나누어 열려진 창(splited window pane)끼리 커서 이동하기 VSCODE는 2019년 기준 가장 많은 프론트엔드 개발자들이 사용하는 텍스트에디터라고 볼 수 있는 Visusal Studios Code의 약자입니다. 화면을 나누어서 파일 열기 화면을 나누어서 파일을 여는 방법은 기본적으로 가장 쉬운 방법을 파일을 오픈할 때 드래그를 통해서 원하는 공간에 배치하면, 자동으로 스플릿 뷰를 만들어서 배치할 수 있게 VS Code가 도와줍니다. 또 다른 방법은 Control+P를 통해서 파일을 서치해서 여는 경우나, 사이드바의 파일탐색기를 통해서 파일을 여는 경우 파일이 선택된 상황에서 Control+Enter를 하면 자동으로 오른쪽 공간에 스플릿 뷰를 만들어서 파일이 열리는 것을 확인하실 수 있습니다. 맥의 경우는 Control이 아닌 CMD를 눌러야 합니다. 나누어지 열..
[MacOS] 용량 관리에서 Other 항목 확인/관리하기 맥OS의 스토리지 정보창을 보면 Other 항목에 많은 할당량이 채워져 있는 상황을 자주 발견할 수 있습니다. 이것은 일반적으로 특수한 확장자를 갖는 파일들(PSD, PDF 등)의 집합이거나 캐시데이터 등 시스템운영데이터를 포함합니다. 이 Other 항목을 관리하는 것이 쉬운 일은 아닌데, 일단 기본적으로 OS 설정에서 이를 관리할 수 있는 툴을 제공하지 않습니다. 관련 클리너 앱들을 사용하는 방법이 있을 수도 있지만, 클리너 앱을 새로 까는 것 자체가 주는 리소스에 대한 부담 및 검증되지 않은 서드파티 프로바이더에게 시스템 팡리 접근을 허용하는 것에 대한 부담 등이 있어 이러한 프로그램 사용을 개인적으로는 좋아하지 않는 편입니다. Other 항목 파일 직접 찾기 Finder 앱을 열고 Find 메뉴를 ..
외주/과외 문의