WEB개발이야기/웹퍼블리싱 2018. 7. 10.
스크롤에 따라 배경이미지의 시차가 다르게 움직이는 Parallax_ImageScroll
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. **홈페이지 : ** [https://github.com/pederan/Parallax-ImageScroll](https://github.com/pederan/Parallax-ImageScroll) **DEMO : ** [http://codepen.io/pederan/full/Hheuy](http://codepen.io/pederan/full/Hheuy) **라이선스 : ** MIT Install bower로 설치할 경우 bower inst..
WEB디자인이야기/WEB디자인 2018. 7. 10.
더미 이미지를 무료로 제공해 주는 사이트를 소개합니다.
웹사이트 개발 시 더미 이미지가 필요한 경우가 있습니다. 레이아웃을 잡는 거라 특별히 의미가 없는 이미지만 필요한 경우 어디서 구하기도 힘들고 저작권도 신경쓰이고 할때 임시로 이미지를 제공해 주는 사이트가 있습니다. 사용법도 아주 쉽게 적용이 가능 합니다. 다만 인터넷이 연결이 되어 있어야 합니다. 더미 이미지 제공 placeimg.com placeimg는 더미이미지를 크기와 카테고리만 지정하면 해당 크기와 카테고리에 해당하는 이미지를 보여줍니다. 웹사이트 : http://placeimg.com 기본사용법은 가로크기와 세로크기 그리고 카테고리를 지정하면 됩니다. 특정 이미지는 지정할 수 없고 카테고리에 따른 랜덤이미지로 보여줍니다. 디폴트 카테고리는 any이고 카테고리 구분없이 모든 이미지에서 랜덤으로 ..
IT이야기/컴퓨터 2018. 7. 10.
탐색기를 넘어선 멀티탐색기인 Q-Dir의 활용
윈도우즈의 파일탐색기는 컴퓨터를 사용하는데 굉장히 유용한 도구 입니다. 물론 컴퓨터에 기본으로 설치되어 있는 탐색기도 매우 훌륭하지만 몇가지 아쉬운 부분이 있는것은 사실입니다. 이번에 Posting하는 Q-dir은 기본 파일탐색기에는 없는 멀티창, 작업위치 저장, 바로가기 기능 등.. 소소하지만 유용한 기능들을 포함하고 있어 사용자의 가려웠던 부분을 일부 해소해 줄 수 있을 것 같습니다. 설치하기 홈페이지에서 다운로드 받기 먼저 Q-dir 홈페이지에서 Qdir을 다운로드 받아야 합니다. 설치형 버전이 있고 무설치형(Portable)버전이 있습니다. 또한 각각의 버전마다 32bit용이 있고 64bit용이 있습니다. 설치형 버전 : 자신의 컴퓨터가 몇 비트인지 확인 후 맞는 것을 다운로드 받으셔서 설치하면 ..
WEB개발이야기/Git 2018. 7. 10.
gogs로 시놀로지의 Git Server을 Github처럼 사용하는 방법
시놀로지에는 기본 패키지로 Git Server가 있습니다. 이것을 설치하고 실행을 하려면 SSH나 Telnet로 접속을 해서 CLI 명령어를 키보드로 쳐 줘야 사용할 수 있습니다. 하지만 이것에 추가로 Git Server를 Web 서비스 형태로 다룰 수 있게 해주는 추가 패키지를 설치하면 Github처럼 Web화면에서 서버를 서비스 할 수 있게 됩니다. Git Server를 Web 형식으로 다룰 수 있는 무료 소스는 여러가지가 있으나 그중에 가장 많은 추천을 받고 있고, 시놀로지용 패키지인 .spk를 제공하고 있는 Gogs를 설치하여 사용하는 방법을 포스팅하려고 합니다. 설치형 무료 Git 서비스 서비스명 설명 URL Bonobo Git Server 설치형 git서비스 (Win) https://bonob..
IT이야기/Office프로그램 2018. 7. 10.
엑셀에서 콤보박스 지정하기
엑셀을 자주 사용하지만 심도깊은 기능을 사용하려면 항상 해메기 마련이지요. 그중에 콤보박스를 설정하는 방법에 대해서도 몇가지 작업을 병행해야해서 자주 잊어버리는 기능중 하나입니다. 그래서 아래에 정리해 둡니다. 참조표 작성 먼저 콤보박스에서 목록으로 사용할 참조표를 작성해야 합니다. 1번의 "차계부항목"쉬트에 그림과 같이 콤보박스에 나타날 목록을 적습니다. 해당 항목은 2번의 "차계부"쉬트에서 사용할 것입니다. 참조표 이름지정 해당 참조표에 아래와 같이 선택하고 이름을 지정해 줍니다. 마우스의 오른클릭을 한후 "이름정의"를 선택합니다. "이름정의"를 선택하면 아래와 같이 팝업창이 뜨는데 관련이름을 임의로 작성을 합니다. 2번의 참조대상은 위의 이미지에서 선택을 한 부분이 자동으로 들어오며 나중에 수정도 ..
IT이야기/무료프로그램 2018. 7. 10.
맥가이버칼 같은 만능 디자인 툴 picpick
맥가이버에게 스위스밀리터리 칼이 있는 것 처럼 디자이너에게는 굉장히 유용하게 사용할 수 있는 만능 디자인 툴인 픽픽(picpick)이 있습니다. 기업 및 단체 또는 개인을 포함한 모든 사용자가 무료로 사용할 수 있으며 상당히 완성도가 높아서 유용하게 사용할 수 있습니다. 다양한 기능 화면 캡처 화면 스크롤 캡처, 전체 영역, 선택 영역, 활성화된 영역, 고정된 영역, 듀얼 모니터 캡처 등 다양한 캡처 기능을 제공하고 있습니다. 직관적인 이미지 편집 기능 그리기, 자르기, 삽입 (텍스트, 화살표, 도형, 말풍선, 스탬프), 형광펜, 하이라이트 효과 등 간단한 이미지 편집 기능이 있습니다. 고급 이미지 효과 및 필터 그림자, 테두리 및 액자, 모자이크, 워터마크, 흐리기, 반전, 이미지 회전, 크기 변경, ..
IT이야기/무료프로그램 2018. 7. 10.
Telnet 접속을 위한 무료프로그램 한글판 PuTTY
Telnet이나 보안접속인 SSH를 접속하기 위한 무료프로그램 Putty를 소개합니다. 윈도우의 CMD에서 telnet을 실행 시킬 수도 있지만 좀더 전문적 프로그램이 필요할 떄 사용하면 됩니다. PuTTY는 무엇보다도 SSH접속이 가능해서 보안 접속에 많이 사용하는 프로그램 입니다. KLDP의 몇몇 훌륭하신 분들이 한글화 작업을 하여 무료로 배포를 하고 있습니다. 해당 사이트에서 다운로드 받아 설치를 하면 되고 설치 방법이 어렵지는 않습니다. 설치를 하면 아래와 같은 화면이 나옵니다. 임시로 사용할 경우는 "접속 대상 정보"에 IP 또는 URL을 입력하시면 되고 접속형식을 선택한다음 하단의 "열기" 버튼을 누르면 접속이 가능합니다. 또한 세션을 저장하여 지속적으로 사용할 수 도 있습니다. 오픈소스-MI..
IT이야기/컴퓨터 2018. 7. 10.
Windows에서 "잠금을 해제하려면 Ctrl+Alt+Del을 누르세요" 화면 피해가기
보안을 위해서 세팅된 잠금을 해제하려면 Ctrl+Alt+Del을 누르세요 라는 메시지가 나오는 화면을 본적이 있을 것입니다. 한동안 컴퓨터를 사용하지 않다가 다시 컴퓨터를 건들게 되면 바로 로그인화면이 나오는 것이 아니라 잠금을 해제하려면 Ctrl+Alt+Del을 누르세요 라는 창이 먼저 나오는 것을 볼 수 있습니다. 보안을 위해 필요한 절차이기는 하지만 가정집이나 기타 보안이 크게 중요하지 않은경우는 귀찮은 것이 사실입니다. 이럴경우 해당 창을 건너뛰기 해서 바로 로그인창이 나오게 할 수 있는 방법이 있습니다. 해당문제를 해결하기 위해서는 데스크탑에서 로컬그룹 정책을 수정해야 합니다. 로컬그룹 정책창 열기 컴퓨터의 시작버튼을 누른면 나오는 명령어 입력창이나 윈도우키 + R버튼을 누른면 나오는 명령어 입..
IT이야기/컴퓨터 2018. 7. 10.
Windows7 에서 WebDAV 연결하는 방법
Windows7의 경우 WebDAV가 연결이 잘 되지 않을 때가 있다. 그때는 아래와 같이 레지스트리를 조금 만져주면 된다. 레지스트리 편집기를 열어 아래 위치를 찾는다 실행 > regedit HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters 아래 키의 값을 1에서 2로 수정한다. 키 이름 : BasicAuthLevel 값(Value) : 2 (키 이름이 없다면 새로 만들기 -> DWORD Value) 각 값이 의미하는 것은 다음과 같다 0 - Basic authentication disabled 1 - Basic authentication enabled for SSL shares only 2 or greater - Bas..
IT이야기/기타 2018. 7. 10.
다후아 IP카메라(IPC-A35) 초기 설정하기
국내 시놀로지 NAS 총판인 에이블스토어에 판매하고 있는 IP카메라인 다후아(Dahua)가 시놀로지 NAS와 호환이 잘된다고 하여 구매를 하였습니다. 가정용으로 사용할 것이므로 DH-IPC-AW12W와 비슷한 DH-IPC-A35를 해외배송으로 구매를 했습니다. 잊어버릴것 같아 처음 IP카메라를 설치하고 초기세팅하는 것을 포스팅 합니다. === 첫 연결 로그인 카메라 방향설정 무선(WIFI) 연결하기 무선IP 설정하기 첫 연결 카메라를 설치하고 랜케이블(유선)을 연결합니다. 처음부터 무선이 연결되지 않으니 유선으로 세팅을 하고 무선을 이용하는 방식으로 사용합니다. 공유기에 랜케이블을 연결하면 DHCP에 의해 자동으로 IP가 할당이 됩니다. 할당된 IP를 브라우저로 접속을 하면 IP카메라에 접속을 할 수 있..
IT이야기/컴퓨터 2018. 7. 10.
win10에서 hosts파일 수정하기
개발을 하다보면 임의로 hosts파일을 변경해야 하는 경우가 있습니다. 이럴경우 Windows 7 버전 이하는 관리자 권환으로 쉽게 수정이 가능한데 windows10버전에서는 관리자권한으로 작업을 한다고 해도 쉽게 수정이 되지 않습니다. 더욱이나 64비트인경우는 그냥 수정이 되지 않습니다. === 이럴경우 아래와 같이 수정하시면 수정이 가능합니다. 안전모드 부팅 hosts파일을 관리자권한으로 수정 재부팅 완료 그럼 좀더 자세히 작성을 해보도록 하겠습니다. 안전모드 부팅 windows10에서 안전모드부팅하는 방법이 몇가지 있으나 저는 1가지만 포스팅하도록 하겠습니다. 업데이트 및 복구 모드를 통해서 1회 안전모드로 재부팅하는 방법입니다. 순서 요약 업데이트 및 복구 선택 복구 선택 고급 시작 옵션 선택 화..
UXUI이야기 2018. 7. 10.
HUD를 넘어서 이제 해드램프로 네비게이션을한다
자동차 오너로써 HUD (전방표시장치 [Head Up Display])만 봐도 대단해 보이는데 해드램프를 이용한 네비게이션까지 나온다고 하니 UX 발전의 끝은 어디인가 하는 생각이 듭니다. 메르세데스-벤츠에서 해드램프를 이용한 네비게이션인 디지털 라이트(Digital Light)를 공개했다고 합니다. 디지털 라이트를 쉽게 설명한다면 해드라이트에 고성능 프로젝터를 달아놓은 것이라고 보면 될것 같은데요. 메르세데스-벤츠는 눈부심 방지가 적용된 2백만 픽셀의 해상도에 해당하는 헤드 라이트를 장착헸디고 합니다. 그래서 주행 중 상황에 따라 다양한 심볼을 보여주기도 하고 네비게이션 가이드도 띄워 주기도 한다고 합니다. 해당 기술은 운전자뿐만 아니라 길을 건너는 보행자에게도 도움을 준다고 합니다. 보행자가 안전하게..
UXUI이야기 2018. 7. 10.
아마존에서 준비중인 드론배송 특허 3가지
아마존에서 드론배송에 대한 다양한 특허를 계속적으로 신청을 하고 있습니다. 어떻게 보면 말도 안되게 병맛인 특허들도 많은데 그중에서 그래도 있으면 좋을것 같은 특허 3가지를 소개해 볼까 합니다. 드론 배송 센터 벌집을 연상시키는 모양의 드론 배송센터에 대한 특허 입니다. 이것은 장거리 배송보다는 도심지의 단거리 배송에 특화된 것이라고 할 수 있습니다. 아직까지 드론의 고질적인 문제인 짧은 배터리 성능이나 고장 등 의 이유로 장거리 운항이 힘들기 때문에 그런것 같습니다. 대략적인 운영 방법은 배송차나 대용량 드론으로 배송할 물건을 배송센터의 타워에 적재를 하면 개개의 배송용 드론이 픽업을 해서 배송지에 배송을 해 주는 형태라고 합니다. 현재는 법적인 문제가 있다고 하는데 향후 법적인 문제가 해결될 경우 요..
UXUI이야기 2018. 7. 10.
BMW의 새로운 도전!! 무선충전시스템의 양산
전기차가 지속적으로 발전을 하고 있고 현재는 한번 충전으로 거의 300km ~ 390km까지 달릴수 있는 차가 대세를 이루고 있는 상황입니다. 그정도 거리면 서울에서 부산까지 편도로 한번 찍을 수 있는 거리인데요. 그것 까지는 대단히 좋은 성과라 할 수 있습니다. 하지만 항상 그 다음이 문제가 되는 것은 그럼 어떻게 다시 서울로 올라오느냐 입니다. 그렇습니다. 바로 충전의 문제 입니다. 빠른 속도로 충전을 하든, 편하게 충전을 하든, 배터리를 교체를 하든, 수소를 집어 넣든, 어째튼 동력을 어떤식으로 얻어 내느냐도 전기차 대중화에 중요한 문제라고 할 수 있습니다. 그런 와중에 BMW가 상용차 생산업체로는 최초로 무선충전시스템의 양산을 하기 시작했다고 합니다. BMW 530e iPerformance 모델에..
UXUI이야기 2018. 7. 10.
물 위에서의 또다른 삶~ 피라미드형 수상주택
이탈리아의 디자이너 피에르파올로 라자리니(Pierpaolo Lazzarini)가 마야와 일본 건축에서 영감을 얻은 피라미드 모양의 떠 다니는 수상가옥을 선보였습니다. Waya라고 명명한 수상가옥은 유리 섬유, 탄소 섬유 및 강철로 만들어 지며 모듈형태로 구성되어 있어서 온실 모듈, 호텔 및 영화관 모듈 등 다양한 모듈로 군을 이루는것이 목표라고 합니다. Waya 모듈은 태양열 패널과 수력 터빈에서 모든 전력을 자체적으로 얻습니다 아직까지는 컨셉단계로 크라우드 펀딩으로 자금을 모으고 있다고 합니다. 첫 번째 (그리고 가장 작은) Waya 모듈을 만들기 위해 35 만 유로 (약 422,600 달러)가 필요하다고 말합니다. 이제 땅에서 벗어나 바다에서 살아갈 날도 머지 않은것 같습니다. 다만 바다를 오염시키지..
UXUI이야기 2018. 7. 10.
내 핸드백을 지키는 확실한 방법 Handbag dyenator
소매치기로 부터 나의 핸드백을 지키는 확실한 제품이 나왔습니다. 아직 시제품이긴 하지만 상당히 아이디어가 좋습니다. 말레이시아의 업체인 Ash Be Nimble에서 개발을 하였고 제품명은 Handbag Dytonator이라고 합니다. 핸드백 엑세서리 형태로 판매가 된다고 하네요. 사용방법은 내 핸드백이 소매치기를 당했을 경우 핸드폰으로 Handbag Dytonator에게 폭발코드를 문자메시지를 보내면 Handbag Dytonator에 있는 SIM카드가 이것을 인식하여 약 5초 후에 폭발을 한다고 합니다. 폭발할 때 염료를 뿌려서 소매치기를 한눈에 확인할 수 있으며 그 표시로 현행범으로 체포 할 수가 있다고 합니다. 그뿐만이 아니라 GPS도 내장하고 있어서 반경 10m이내로 위치를 추적할 수 있다고 하니 ..
UXUI이야기 2018. 7. 10.
발렛파킹도 로봇이!! stan
저희 아파트는 지은지 벌써 15년이 넘고 있어서 그런지 주차공간이 매우 협소한 편입니다. 항상 문콕테러를 걱정하면서 주차를 하게 됩니다. 물론 빨리 법이 바뀌어서 주차영역이 코스트코 만큼이나 넓게 지정이 되어야 겠지만 그럴경우 발생하는 또다른 문제는 주차할 수 있는 차량의 수가 상대적으로 줄어든다는데 있습니다. 이번에 이런문제를 말끔히 해결해 줄 발렛파킹을 해주는 로봇이 나와서 소개를 할까 합니다. 스탠리 로보틱스(Stanley Robotics)라는 프랑스의 한 회사가 Stan이라는 로봇을 제작하였다고 합니다. 현재 프랑스의 샤를르 드골 공항에서 시범서비스를 하고 있다고 하는데 곧 세계곳곳에 발렛파킹을 담당하게 될 수도 있지 않을까 합니다. 이 로봇 발렛파킹 서비스는 사용자가 일정한 장소에 차량을 주차하..
UXUI이야기 2018. 7. 10.
월마트 자율주행 쇼핑카트
요즘에는 자율주행이라는 것이 대세인가봅니다. 쇼핑카트까지 자율주행을 한다고 하니.. 뭐.. 몇년 전부터 상상은 해봤던 것이기는 한데.. 실제로 월마트에서 특허까지 취득을 했다고 하니 곧 마트에서 혼자 굴러다니는 쇼핑카트를 볼 날도 멀지 않은것 같습니다. 월마트에서는 위치파악센서, 비디오카메라, 무선네트워크기술을 활용한 기기를 쇼핑카트의 밑에 부탁을 하면 카트가 자유롭게 욺직여서 호출한 사용자 앞으로 오기도 하고 사용자가 원하는 상품의 위치로 안내까지 하는 것에 대한 특허를 취득했다고 합니다. 추후에는 카트에 물건을 집어 넣으면 상품에 부착되어 있는 RFID를 활용하여 자동으로 계산도 해주고 사람에게 부착되어 있는 RFID를 활용해 바로 결제까지 처리가 될 수도 있을 것 같습니다. 또한 물건을 싣고 주차장..
카테고리 없음 2017. 5. 23.
GNB메뉴 Mouse On일때 스치기만해도 서브메뉴가 나올 시 해결방법
퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다. 퍼블리싱을 하다보면 GNB의 1Depth 메뉴에 마우스를 올렸을경우 2Depth메뉴가 아래로 내려오는 UI를 구현하는경우가 많습니다. 이때 의도치 않게 마우스가 브라우저 상단에서 컨테츠쪽으로 이동하려고 할때 GNB영역을 거치게 되는데, 바로 2Depth메뉴가 나타나는 경우가 생깁니다. 말하자면 의도치 않게 2Depth메뉴를 보게 되는 것입니다. 그럴경우 Mouse On의 감도를 조절하여 그냥 스쳐지나가는 것은 반응이 일어나지 않고 의도를 가지고 어느정도 버튼에 머물 경우 2Depth메뉴가 나오게 하는 javascript코드입니다. JAVASCRIPT var delay = ..
카테고리 없음 2017. 3. 14.
Angular2와 관련된라이브러리들
Angular2만 단독으로 사용하는 것도 가능하겠지만 개발시간을 단축할 수 있게 해주는 여러가지 라이브러리 들이 존재합니다. 먼저 Angular2를 공부했다면 자신이 원하는 것을 개발하기 위해 라이브러리들을 활용할 필요가 있습니다. 그리고 이러한 라이브러리들은 대부분 무료로 사용할 수 있습니다. 관련 라이브러리 IONIC 프레임워크 2 : 모바일 개발용 프레임워크 네이티브 스크립트 2.0 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 리액트 네이티브 : 웹뷰기반이 아닌 네이티브 기반의 UI 개발 Angular 유니버셜 : Angular의 렌더링을 서버에서 처리하게 해줌(검색엔진최적화) 미티어(meteor) : 풀스텍 자바스크립트 플랫폼 Ng-bootstrap라이브러리 : Angular2에서 사용가능한 B..
WEB개발이야기/오픈소스 2017. 2. 28.
Angular2의 개요
Angular2에 대한 세부적인 포스팅을 하기 전에 먼저 간단하게 개요를 정리 합니다. Angular2란? 구글에서 만든 open-souce web application SPA(Single Page Application) 개발이 가능 다양한 플랫폼에 맞게 개발 가능 유지보수, 개발 속도 향상 (데이터 바인딩, 템플릿 등의 문법 제공 ) 아키텍쳐 ▲ https://angular.io/docs/ts/latest/guide/architecture.html 참조 Angular2의 구성요소 Angular2를 구성하는 요소는 크게 4가지 입니다. 컴포넌트 (Component) 모듈 (Module) 서비스 (Service) 지시자 (Directive) 컴포넌트 (Component) ▲ 참고 Angular는 컴포넌트를..
카테고리 없음 2016. 6. 29.
Hybrid Web 개발을 위한 ionic 개발환경세팅
Hybrid Web을 개발하기 위해 ionic을 선택했다면 몇가지 환경을 세팅해야 합니다. Hybrid Web 개발을 위한 ionic 개발환경세팅 Hybrid Web을 개발하기 위해 ionic을 선택했다면 몇가지 환경을 세팅해야 합니다. 먼저 안드로이드로 랩핑하기 위해 JAVA SDK와 Android SDK를 먼저 설치해야 하고 핵심이 되는 Ionic을 개발하기위해 Node.js, bower.io, git을 설치해야 합니다. Node.js, bower.io, git의 설치방법은 그다지 어렵지 않으므로 이번에는 생략을 하고 JAVA SDK와 Android SDK 그리고 간단한 개발용 DB인 json-server 그리고 Ionic과 Cordova를 설치하는 것으로 마치려고 합니다. JAVA SDK 설치완 환..
티스토리 스킨/T스킨 설명서 2016. 5. 25.
티스토리의 skin 설치 및 설정
티스토리 스킨은 티스토리에서 제공하는 스킨을 적용하는 방법도 있지만 다른 사람이 배포하는 스킨을 적용 할 수도 있습니다. 저희가 배포하는 스킨도 쉽게 적용할 수 있으며 공통적으로 아래의 방법으로 등록하시면 됩니다. 먼저 제공자의 스킨을 다운로드 합니다. 대게 압축파일로 되어 있으니 압축을 해제하고 시작하시면 됩니다. 저희가 제공하는 스킨은 아래에서 다운로드 받을 수 있습니다. UX공작소의 티스토리 스킨 바로가기 설치 스킨등록 먼저 스킨을 적용하기 위해서는 티스토리 사이트에서 먼저 스킨을 등록해야 합니다. 스킨메뉴를 선택합니다. 스킨등록 버튼을 선택합니다. 새 스킨등록 스킨저장명을 작성합니다. 추가버튼을 클릭하고 파일을 등록합니다. 이때 images폴더의 파일도 등록을 해야합니다. 저장버튼을 클릭하여 등록..
