WEB개발이야기/React.js 2024. 2. 28.
Next.js 14버전에서 모달창 띄우는 초간단 방법
Next.js 14 버전에서 모달 창을 쉽게 띄우는 방법을 포스팅하려고 합니다. Next.js는 폴더의 형태와 이름에 따라 경로 구성과 기능이 달라지니, 폴더 구조와 이름을 주의 깊게 설정하는 것이 중요합니다. 아래 글을 참고하여 설정해 보세요. Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드 모달 창을 띄우기 위한 기술 Next 14버전에서 모달을 띄우기 위한 핵심기술로 패러랠 라우트와 인터셉트 라우트가 있습니다. 일반적으로 모달을 구현하기 위해 다음과 같은 폴더 구조를 사용합니다. └── app ├── @modal │ ├── default.js │ ├── (.)flow │ │ └── page.js │ └── ... └── ... 패러랠 라우트 개념 하나의 layou..
WEB개발이야기/웹퍼블리싱 2024. 2. 26.
Classnames vs. clsx: 당신에게 딱 맞는 CSS 클래스 조합 도구는?
React에서 동적으로 클래스 이름을 조작하는 것은 흔히 발생하는 작업입니다. 이 작업을 간편하게 해주는 두 라이브러리가 바로 classnames와 clsx입니다. 이 글에서는 두 라이브러리의 장점과 단점, 특이할 만한 사항 등을 비교 분석하여 개발자들이 각 라이브러리의 특성을 파악하고 적절하게 선택하는 데 도움을 드리고자 합니다. 또한 그 중에서 최근에 더 곽광을 받고 있는 clsx에 대해서 자세히 살펴보겠습니다. 1. Classnames classnames는 클래스 이름을 조합하고 조건부로 적용하는 데 사용되는 유틸리티 라이브러리입니다. 다음과 같은 특징을 지닙니다. 장점: 직관적인 API: classnames는 객체 형식으로 클래스 이름을 정의하여 간결하고 직관적인 코드를 작성할 수 있도록 합니다...
WEB개발이야기/웹퍼블리싱 2024. 2. 22.
Day.js vs Moment.js: 날짜 처리 라이브러리 비교 분석 (초보자를 위한 가이드)
JavaScript에서 날짜 처리를 위한 라이브러리는 필수적인 요소입니다. 다양한 날짜 형식을 다루고, 계산하고, 포맷팅하는 작업을 쉽게 해주죠. 그 중 가장 인기 있는 라이브러리로는 Moment.js와 day.js가 있습니다. 과연 어떤 라이브러리가 더 나은 선택일까요? 1. 비교 분석 기준 day.js Moment.js 크기 (gzip) 2.1KB 22.9KB 성능 약 1.4배 빠름 - API Moment.js와 유사, 변경 불가능 객체 사용 다양한 함수 제공, 객체 직접 수정 가능 기능 핵심 기능 집중, 플러그인을 통한 확장 가능 다양한 기능 제공 지원 활발하게 개발 중, 커뮤니티 성장 중 탄탄한 지원 체계, 활발한 커뮤니티 브라우저 지원 IE 11 지원하지 않음 IE 11까지 지원 장점 가볍고 빠..
WEB개발이야기/React.js 2024. 2. 20.
React와 Next.js에서 상태 관리하는 7가지 방법 비교: 심층 분석 및 실제 사례
React와 Next.js는 웹 개발에서 가장 인기 있는 프레임워크 중 하나이며, 동적인 웹 애플리케이션을 구축하기 위한 강력한 도구입니다. 하지만, 프로젝트 규모가 커지면서 여러 컴포넌트 사이에서 데이터를 공유하고 관리하는 것은 점점 더 복잡해집니다. 이러한 문제를 해결하기 위해 다양한 상태 관리 방법들이 등장했습니다. 본 글에서는 7가지 대표적인 상태 관리 방법 (useState, useReducer, Context API, Redux, Recoil, Zustand, Next.js SWR)을 심층 분석하고, 각 방법의 장단점을 비교하며 실제 사례와 함께 적용 방법을 제시하려고 합니다. 또한, 프로젝트 특성에 따라 적합한 상태 관리 방법을 선택하는데 도움이 되는 추가 고려 사항과 팁을 제공하려고 합니다..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14 핵심 기능: App 라우팅과 Pages 라우팅의 장단점 비교
Next.js 12버전이하에서는 기본적으로 Pages Routing 방식을 사용했으나 Pages Routing의 단점을 극복하고자 14버전에서 App Routing을 도입하게 되었습니다. 그래서 현재 14버전에서는 Pages Routing과 App Routing 방식을 선택하여 사용할 수 있습니다. 각 라우팅 컨벤션은 서로 다른 구조와 특징을 가지고 있으며, 프로젝트의 특성에 따라 적합한 컨벤션을 선택하는 것이 중요합니다. 기존 Next.js 프로젝트를 관리하는 차원이라면 Pages 라우팅 방식을 추천하지만 만약 새롭게 프로젝트를 진행하게 된다면 App 라우팅 방식을 추천합니다. 1. App 라우팅 컨벤션 App Routing Conventions는 Next.js 14 버전에서 새롭게 도입된 라우팅 컨벤..
WEB개발이야기/React.js 2024. 2. 19.
Next.js 14버전에서 App 라우팅 심화: 폴더 구조와 파일 특징 완벽 가이드
Next.js 14 버전에서 도입된 App 라우팅 방식은 폴더 구조와 파일 규칙을 기반으로 강력하고 유연한 라우팅 경험을 제공합니다. 이 글에서는 폴더와 파일의 명칭에 대한 규칙을 명확하고 간결하게 정리하여 개발자들이 App 라우팅을 쉽게 이해하고 활용할 수 있도록 정리 했습니다. 라우팅(Routing) 파일들 APP 라우팅 방식은 기본적으로 컴포넌트를 기준으로 경로를 설정하게 됩니다. 기본적으로 사용되는 라우팅 파일 형식은 아래와 같습니다. 파일 명 확장자 설명 layout .js .jsx .tsx 화면의 레이아웃을 정의 합니다. page .js .jsx .tsx 화면의 컨텐츠를 정의 합니다. loading .js .jsx .tsx 화면이 로딩될 때 보여줄 UI 화면입니다. not-found .js ...
IT이야기/시놀로지 2024. 2. 14.
시놀로지 나스 방화벽 설정하는 최선의 방법
Synology NAS를 사용하고 있다면 방화벽을 꼭 설정해야 합니다. 방화벽을 설정하지 않으면 인터넷에 연결된 NAS는 더 이상 당신의 것이 아니라 해커들의 놀이터가 될 것입니다. 만약 NAS에 중요한 정보가 저장되어 있다면 그 정보가 도난당하는 것은 시간 문제일 뿐입니다. 집에서 사용 중이라면 공유기와 함께 Synology NAS에 보안을 적용하는 것이 필요합니다. 전체 구성도 대략적인 전체 구성도는 다음과 같습니다. 시놀로지 나스 방화벽 설정 : 방화벽을 설정하여 외부에서 오는 80, 443 포트만 접근할수 있게 합니다. 공유기 포트 포워딩 설정 : 외부에서 들어오는 80, 443 포트만 시놀로지 나스로 포트 포워딩 합니다. DDNS 설정 : 시놀로지 나스에서 DDNS를 설정합니다. 시놀로지 나스 ..
WEB디자인이야기/WEB디자인 2023. 12. 20.
웹사이트의 가독성과 스타일을 동시에 향상시키는 산돌구름 웹폰트
예전에 디자인을 공부하는 대학생일 때, 산돌이라는 폰트 회사를 처음 알게 되었습니다. 그때 접했던 폰트들은 주로 출판물인 에디토리얼 디자인에 활용했었는데... 지금 시간이 흘러 다시 웹폰트로 만나게 되니 정말 감회가 새롭습니다. 예전에 알던 폰트 회사들이 사라진 회사도 많은데, 지금까지 성장해 온 산돌의 저력이 새삼 느껴집니다. 오늘은 웹 디자인을 위한 필수 아이템인 웹폰트, 그중에서도 이번에 출시한 산돌구름 웹폰트에 대해 이야기해 보려고 합니다. 그 전에 먼저 웹폰트가 무엇인지부터 알아볼까요? 웹폰트란 웹폰트는 웹사이트 디자인에서 중요한 요소로, 다양한 방식으로 웹사이트의 시각적 매력과 기능성을 향상시킬 수 있는 요소입니다. 1. 웹폰트의 개념 웹폰트는 사용자의 시스템에 설치되지 않은 폰트를 웹사이트에..
WEB개발이야기/React.js 2023. 11. 25.
nextjs(react)에서 tailwindcss와 구글폰트 연계해서 사용하기
Next.js를 사용할 때 스타일링으로 tailwindcss를 많이 사용할 것입니다. 또한 폰트로 Google Fonts도 많이 사용하게 되는데요. 구글 웹폰트를 사용하는 경우 보통 아래와 같이 CDN으로 구글에서 웹폰트를 불러와서 적용하는 방법을 많이 사용합니다. Making the Web Beautiful! 이럴 경우 사용이 편한 장점도 있지만 오프라인이거나 네트워크가 좋지 않은 환경에서는 단점으로 작용을 합니다. 그래서 Next.js에서는 폰트를 별도의 패키지로 만들어서 제공하고 있습니다. 이럴 경우 사용하는 것은 웹폰트를 사용하는 것만큼 쉽고 퍼블리싱 할 때 local로 해당 폴더만 가져가기 때문에 오프라인일 때도 웹폰트가 표현이 되는 장점이 있습니다. Next.js에서 Google Fonts 적..
WEB개발이야기/React.js 2023. 11. 17.
Nextjs(React)에서 Google Sheets를 데이터베이스로 사용할 수 있을까
영세한 개발자나 취미로 개발을 하는 사람이라면 항상 생각하는 것이 내가 개발한 웹서비스를 무료로 서버에 올려서 사용할 수 있을까? 라는 것입니다. 스태틱 한 웹서비스인 경우는 상대적으로 길이 많은데 데이터베이스까지 붙여야 한다면 이건 또 말이 다르게 됩니다. 고성능의 데이터베이스까지는 필요도 없는데 말이죠. 저도 이번에 Next.js(React)로 아주 간단한 웹서비스를 토이 프로그램으로 개발하기로 하면서 데이터베이스에 대해 문득 든 생각이 Google Sheets를 사용하면 되지 않으까?였습니다. 그래서 여기저기 이것저것 알아보다가 굳이 고성능이 필요하지 않다면 Google Sheets가 대안이 될 수도 있겠다고 판단하여 시도해 봤습니다. 결과는 어느 정도 성공적이어서 잊어버리기 전에 공유를 하려고 합..
IT이야기/시놀로지 2023. 11. 7.
'시놀로지가 갑자기 켜지지 않아요' 해결방법
저는 시놀로지로 DS918+을 사용합니다. 18년도 산이니까 대략 5년 정도 사용한 제품으로 보증기간이 끝난 제품인 거지요. 다시 말하면 이제는 제가 알아서 고쳐 써야 한다는 것이기도 하구요. 그 상황에서 이런 고장이 발생하니 좀 황당했습니다. 그래도 해결하는 방법이 비교적 간단했기에 다른 사람들을 위해 글로 공유를 하려고 합니다. 불행하게도 사진을 찍어놓지는 못했네요. 최대한 상황 설명으로 작성해 보겠습니다. 증상 어느 순간 NAS에 접속을 해보니 접속이 되지 않아서 살펴보니 NAS 전원이 꺼져있었습니다. 전원 버튼을 누르니 전원 LED(파랑)가 계속 깜박이다가 약 10~20초 후에 바로 전원이 꺼져버립니다. 전원이 들어와야 로그를 보던 상태를 보던 할 텐데 처음부터 NAS가 켜지지 않으니 난감하더라구..
IT이야기/Google프로그램 2023. 11. 7.
Google의 할 일 관리 서비스인 Tasks를 아시나요?
저는 구글의 서비스를 사용하는 것을 좋아합니다. 인터넷이 있다면 어디에서나 작업할 수 있고, 거의 실시간으로 모든 기기에서 동일한 서비스를 이용할 수 있기 때문입니다. 게다가, 헤비유저가 아니라면 무료로 사용할 수 있는 많은 서비스도 있구요. 저는 할 일을 관리하기 위해 구글 Keep을 사용했습니다. 하지만 Keep은 무언가를 마구 적는 데는 좋지만, 할 일을 관리하는 데 불편한 점이 있었습니다. 구글에는 할 일을 관리할 수 있는 Tasks라는 서비스가 있습니다. 이전에는 할 일을 관리하는 데 몇 가지 단점이 있었지만, 이제 다시 살펴보니 내가 원하는 수준으로 사용할 수 있는 방법이 있어서 소개를 하려고 합니다. Google Tasks Google Tasks는 구글 서비스 중에서 약간 기생하는 서비스 같..
WEB디자인이야기/WEB디자인 2023. 11. 6.
디자이너라면 꼭 알아야할 컬러 조합 추천 색상 팔레트 웹사이트 8선
프로젝트를 시작할 때 색상에 대해서 쉽게 생각할 수 있지만 실제로 색상 팔레트를 설정하는것은 생각보다 어려울 수 있습니다. 예를 들어, 웹사이트를 만들 때 디자이너의 경험에 상관없이 어떤 색상을 사용할지 항상 어려운 과제입니다. 색상 팔레트 웹사이트는 이러한 경우에 어떤 안내를 제공해줍니다. 일부 서비스는 정확한 색상 정보를 받기 위해 웹사이트에 회원으로 등록해야 하고, 어떤 경우에는 회원으로 등록하지 않아도 유용한 정보를 제공해 주는 곳도 있습니다. 여기 몇 가지 이러한 색상 팔레트 서비스를 제공하는 웹사이트를 소개하겠습니다. 1. Colordot - A color picker for humans URL : https://color.hailpixel.com 사람을 위한 색상 선택기라고 되어 있는데 이 ..
WEB디자인이야기/Figma 2023. 10. 26.
피그마에서 일러스트파일(ai)파일 불러오는 방법
피그마를 사용하다 보면 제목에서 말한 것처럼 일러스트레이터 파일인 ai를 불러와야 하는 경우가 있어요. 느낌적인 느낌으로 ai 파일도 벡터 기반 파일이고 일러스트레이터 파일도 벡터 기반 파일이므로 쉽게 불러와질 것 같지만 아쉽게도 불가능합니다. illustator를 만든 회사가 Adobe라며.. Adobe가 피그마를 인수했다며.. 그렇다면 호환성 면에서도 바로 불러와져야 하는 거 아냐? 뭐 나중에야 가능하겠지만 당장은 불가합니다. 그래서 약간의 변환작업이 필요한데 수중에 Adobe 일러스트레이터 프로그램이 있다면 문제가 없겠지만 이것도 유료이므로 없는 경우도 많겠지요. 그래서 ai, eps 파일을 svg 파일로 무료 변환해 주는 웹서비스가 있어서 소개해드립니다. 파일 간 변화를 서비스해 주는 conver..
WEB디자인이야기/Figma 2023. 9. 27.
피그마 실무에서 가장 유용한 플러그인 리스트
피그마에 힘을 더해주는 실무에서 많이 사용하는 플러그인에 대해서 정리를 해 볼까 합니다. 피그마 플러그인 적용 방법 피그마의 플러그인 적용 방법은 매우 쉽습니다. 플러그인을 별도로 설치하는 개념이 아니고 커뮤니티에 있는 플러그인을 단지 찾아서 실행시킨다는 개념입니다. 경우에 따라서 플러그인에 회원가입을 해야 하는 경우도 있습니다. 상단 도구 메뉴에서 Resources 메뉴를 선택합니다. 탭 메뉴 중 중간에 있는 Plugins 탭을 선택합니다. Search all plugins의 검색창에 원하는 플러그인 명을 입력하고 검색을 합니다. 원하는 플러그인이 나타나면 우측에 있는 Run 버튼을 클릭하면 됩니다. 피그마의 유용한 플러그인들 Annotate it 이 플러그인은 기획자용 툴입니다. 화면에 번호 주석을 ..
WEB디자인이야기/Figma 2023. 9. 23.
피그마의 꽃 오토 레이아웃 사용법
피그마 편집의 꽃이라 할 수 있는 오토 레이아웃입니다. 오토 레이아웃은 디자인 요소를 자동으로 배열하고 정렬하는 강력한 기능입니다. 이를 사용하면 웹 페이지, 모바일 앱 및 기타 사용자 인터페이스 디자인을 쉽게 조작하고 관리할 수 있습니다. 오토 레이아웃의 주요 특징은 다음과 같습니다 요소 정렬: 오토 레이아웃을 사용하면 요소를 수평 또는 수직으로 정렬할 수 있습니다. 이렇게 하면 텍스트, 이미지 또는 버튼과 같은 요소들을 쉽게 정렬할 수 있습니다. 크기 조절: 요소의 크기를 자동으로 조절할 수 있습니다. 이로써 다양한 화면 크기 또는 내용에 맞게 요소의 크기를 조정할 수 있습니다. 자동 스크롤: 만약 요소가 공간을 벗어나면 자동으로 스크롤이 생성됩니다. 이로써 긴 목록이나 페이지를 만들 때 효과적으로 ..
WEB디자인이야기/Figma 2023. 9. 22.
피그마의 컴포넌트 프로퍼티(Property)와 베리언트(variants) 사용법
이전 포스팅에서 피그마의 컴포넌트에 대해서 포스팅을 했었습니다. 만약 피그마의 컴포넌트에 대해서 잘 모르시면 아래 링크를 먼저 읽어보시는 것이 좋습니다. 피그마의 컴포넌트로 구현하는 아토믹 디자인 피그마에서 가장 중요하고 이해가 필요한 것이 컴포넌트 프로퍼티(Property)와 베리언츠(Variants), 오토 레이아웃입니다. 한글로 번역하면.. 프로퍼티(Property) - 속성 : 인스턴스의 디자인 패널을 통해 미리 마스터 컴포넌트에 설정해 놓은 속성(Property)을 선택 또는 입력으로 지정한 변형을 줄 수 있음 베리언츠(Variants) - 변형 : 몇 개의 마스터 컴포넌트를 베리언츠로 하나로 묶어서 설정하며 인스턴스로 사용할 때 디자인 패널에서 그 중 하나를 선택하여 사용함 마스터 컴포넌트를 ..
WEB디자인이야기/Figma 2023. 9. 22.
피그마의 컴포넌트로 구현하는 아토믹 디자인
웹 및 앱 디자인의 세계에서는 효율성, 일관성 및 확장성이 가장 중요합니다. 최근 몇 년간 상당한 인기를 얻은 접근 방식 중 하나는 Figma 구성 요소를 사용한 아토믹 디자인 설계 구현입니다. 이 기사에서는 아토믹 디자인 개념, 이것이 Figma에 어떻게 적용되는지, 디자이너와 개발자에게 제공되는 이점에 대해 살펴보겠습니다. 아토믹 디자인이란 무엇입니까? 원자 설계(Atomic Design)는 브래드 프로스트(Brad Frost)가 도입한 방법론입니다. 재사용성과 일관성을 촉진하는 디자인 시스템을 만드는 체계적인 접근 방식입니다. 원자 디자인의 핵심 아이디어는 사용자 인터페이스를 더 작고 재사용 가능한 구성 요소로 나누는 것입니다. 개발자들에게 객체지향이 있다면 UX/UI 디자인에서는 아토믹 디자인이 ..
IT이야기/무료프로그램 2023. 9. 18.
개떡같이 그려도 찰떡같이 분석해주는 구글의 AI 마법 그림 도구 오토드로우( AutoDraw)
오토드로우(AutoDraw)는 구글이 개발한 인공지능 기반 그림 그리기 도구입니다. 이 도구는 사용자가 그림을 그릴 때 도움을 주며, 간단한 스케치나 그림을 입력하면 그림을 인식하고 관련된 그림과 그림 요소를 제안합니다. 오토드로우를 사용하면 더 전문적인 그림 작업을 하지 않고도 빠르게 그림을 만들 수 있습니다. 오토드로우(AutoDraw)의 주요 특징 인공지능 기반 그림 인식 오토드로우는 강력한 인공지능 기술을 기반으로 작동합니다. 사용자가 스케치한 그림을 실시간으로 분석하여 그림 요소를 인식하고 이에 맞는 제안을 제공합니다. 그림 제안 사용자가 그림을 그리는 동안, 오토드로우는 비슷한 형태나 주제의 그림 요소를 화면 하단에 제안합니다. 이러한 제안은 사용자가 원하는 그림을 찾는 데 도움이 됩니다. 간..
IT이야기/무료프로그램 2023. 9. 16.
무료로 이미지의 배경을 제거해 주는 웹사이트
"remove.bg"는 배경을 자동으로 제거하는 온라인 도구입니다. 이 도구는 주로 사진 편집 작업을 수행하는 사용자들에게 매우 유용하며, 사진에서 불필요한 배경을 쉽게 제거하여 주요 주제를 강조할 수 있습니다. 아래는 "remove.bg"에 대한 주요 특징과 작동 방식에 대한 정보입니다: 자동 배경 제거: "remove.bg"는 사진을 업로드하면 인공 지능 (AI)을 사용하여 주요 주제를 식별하고 배경을 자동으로 제거합니다. 이를 통해 배경 제거 작업을 빠르고 효율적으로 수행할 수 있습니다. 온라인 사용: "remove.bg"는 온라인 서비스로 제공되므로 별도의 소프트웨어 설치나 다운로드가 필요하지 않습니다. 웹 브라우저에서 엑세스하여 사용할 수 있습니다. 다양한 이미지 형식 지원: "remove.bg..
티스토리 스킨/T스킨 공지사항 2023. 9. 15.
커스텀 스킨의 애드센스와 티스토리 공식 애드센스의 충돌 문제 해결 했습니다.
안녕하세요. 오랜만에 스킨 업데이트(버전 3.0.1)를 진행했습니다. 이번 버전에서는 이전에 유료로 판매되던 Tskin을 무료로 제공하게 되었습니다. 이전의 유료 스킨이었던만큼 이번 업데이트는 완성도가 높은 스킨을 제공합니다. 티스토리 커스텀 스킨에서 애드센스 오류 발생 및 해결 이번 업데이트의 가장 주요한 특징은 애드센스 기능의 개선입니다. 이제 스킨 설정에서도 광고의 게시와 삭제를 토글버튼으로 쉽게 조절할 수 있도록 처리되었습니다. 문제 발생 티스토리 커스텀 스킨에서 애드센스 개선 과정 중 발생한 문제에 대해 설명드리겠습니다. 티스토리가 애드센스 광고를 공식적으로 적용하게 되면서, 공식 스킨이나 애드센스가 적용되지 않은 기존 스킨에서는 쉽게 광고를 추가할 수 있게 되었지만, 수동으로 애드센스 코드를 ..
WEB디자인이야기/Figma 2023. 8. 24.
피그마에서 Constraints 옵션 사용법
피그마 뿐아니라 대부분의 이미지 편집툴에서 공통적으로 활용되는 것이 Constraints라는 옵션입니다. 이게 보통 많이 봐와서 안다고 생각할 텐데 막상 모르고 사용하는 경우가 많아서 명확하게 정리를 한번 해보려고 합니다. 개념을 먼저 이해해야 하는데, Frame의 크기가 변경될 때 설정된 요소는 어떤 기준으로 움직이는지에 대한 설정입니다. 상세 옵션 설정 기본값은 가로(Horizontal)는 Left, 세로(Vertical)는 Top입니다. 기본값 ( 가로 : Left, 세로 : Top) 요소의 왼쪽부터 Frame까지의 거리가 고정이 되고 요소의 상단부터 Frame까지의 거리가 고정이 되어서 Frame의 크기를 변경하면 우측과 하단 부위의 넓이만 움직이게 됩니다. 오른쪽과 하단 고정 ( 가로 : Rig..
WEB디자인이야기/Figma 2023. 8. 23.
피그마의 문서 구조는 어떻게 되나요?
포토샵으로 웹디자인과 모바일디자인같은 UI디자인을 하던 시대를 지나 맥킨토시 진영에서 스케치(Sketch)라는 걸출한 UI전용 툴이 탄생하면서부터 시작된 UI전용 툴의 춘추전국시대를 지나 현재는 피그마(Figma)가 UI툴 업계를 평정하는 양상입니다. Figma는 UI 디자인 및 협업 도구로서 혁신적인 위치와 상태에 있습니다. 이전의 UI 도구들이 겪었던 한계와 문제점을 극복하여, Figma는 웹 기반의 협업 플랫폼으로 디자이너들이 함께 작업하고 디자인을 공유하며 시각화할 수 있는 기능을 제공합니다. 이제 Figma는 단순히 UI 요소만 디자인하는 도구를 넘어서, 디자인 시스템을 관리하고 유지할 수 있는 기능을 포함하고 있습니다. 디자인 시스템을 구축하고 유지하면서 일관된 디자인 언어를 유지하고 팀 간의..
IT이야기/맥북 2023. 8. 18.
20230818_mov파일을 GIF로 변환하는 방법(feat. Homebrew, ffmpeg)
맥북에서 화면을 녹화해서 누구나 볼 수 있게 aniGIF로 변환해야 될 일이 생겼습니다. 여기서부터 시작했는데, 이 과정에서 많은 기술적인 정보를 습득하게 되어 포스팅을 해 봅니다. 화면 녹화하기 맥북에서 화면을 녹화할 때 기본 기능을 활용할 수 있습니다. Shift + Command + 5 버튼을 동시에 누르면 화면 캡처 또는 녹화 모드로 진입을 하게 됩니다. 왼쪽 3개의 버튼은 스틸샷 캡처, 가운데 2개의 버튼은 화면 동영상 녹화, 오른쪽 끝의 버튼은 실행 버튼입니다. 저는 가운데에 있는 버튼을 클릭하여 화면을 녹화하였습니다. 해당 화면을 녹화하면 결과물이 ***.mov라는 동영상 파일 포맷으로 저장이 됩니다. 이제 이 동영상 파일을 animate GIF 변환시켜야 합니다. Homebrew 설치하기 ..
IT이야기/시놀로지 2023. 5. 23.
시놀로지 VideoStation으로 영상이 재생되지 않을 때 해결하는 방법
시놀로지에서 VideoStation은 정상적으로 잘 설치가 되었는데 영상을 플레이하다보면 잘 재생이 되는 경우도 있지만 어떤 영상은 재생이 되지 않는 경우가 있습니다. 그런경우 혹시 오디오 코덱의 문제가 아닌지 확인해 볼 필요가 있습니다. 코덱이 무료코덱도 있지만 유료 코덱도 존재합니다. 그래서 VideoStation같은 무료의 제품인경우는 굳이 돈을 지불해가면서 까지 코덱을 제공해 주지 않습니다. 그 유료코덱중에 대표적으로 DolbyⓇ의 오디오 코덱(DTS, EAC3, TrueHD)들이 있습니다. 그래서 시놀로지를 설치하거나 업데이트를 하는 경우 DTS, EAC3, TrueHD 코덱이 실행될 수 있게 설치하는 작업을 해야 하는데, 이과정이 다소 복잡하고 짜증이 납니다. 이 부분을 github에 Alex..
IT이야기/맥북 2023. 5. 19.
맥OS에서 숨겨진 폴더와 파일 표시하기
맥OS는 사용자에게 편의성과 보안을 제공하기 위해 일부 폴더와 파일을 숨김 처리합니다. 하지만 때로는 숨겨진 폴더와 파일에 접근해야 할 필요가 있을 수 있습니다. 이 글에서는 맥OS에서 숨겨진 폴더와 파일을 표시하는 방법에 대해 자세히 알아보겠습니다. 1. Finder 옵션 설정 Finder는 맥OS에서 파일 및 폴더를 탐색하는 기본 애플리케이션입니다. 숨겨진 폴더와 파일을 표시하기 위해서는 다음 단계를 따르세요: Finder를 엽니다. 상단 메뉴에서 "Finder"를 클릭한 후 "환경설정"을 선택합니다. "고급" 탭을 클릭합니다. "모든 파일 확장자 표시" 옵션을 선택합니다. "라이브러리 폴더 표시" 옵션을 선택합니다. 변경 사항을 저장합니다. 이제 Finder에서는 숨겨진 폴더와 파일이 표시됩니다. ..
IT이야기/기타 2023. 2. 17.
레노버 태블릿 Y700 반글화 및 문제점 해결방법
레노버 내수용 태블릿 초기 반글화 하기 제가 레노버 Y700을 구매했습니다. ㅎㅎ 중국 내수용 제품이다 보니 한글화부터 이것저것 설정해야 할 것이 많은데 잊어버리지 않기 위해 정리 차원에서 정리했습니다. 1. 처음 설정 처음 태블릿을 실행시키면 중국어로 나오게 됩니다. 중국어를 모른다면 일단은 영어로 설정을 해 놓고 시작하는 것이 좋습니다. 다음 화면 와이파이를 잡아 줍니다. 다음 화면 Game Mode는 우측 하단 Next 버튼을 클릭합니다. 다음 화면 PC Mode도 Next 버튼을 클릭합니다. 다음 화면 LeCloud도 Skip 버튼을 클릭합니다. 다음 화면 Recommended apps도 Skip 버튼을 클릭합니다. 다음 화면 System Navigation 도 둘 중 하나를 선택하고 Go 버튼을..
IT이야기/기타 2023. 2. 13.
아파트 천정에 붙은 와이파이 AP 초기화 하는 방법
입주를 했을 때부터 천정에 둥그런 WIFI가 달린 것을 보았습니다. 사실 이게 WIFI라는 것을 알았지만 기본 속도가 최대 300Mbps밖에 되지 않아서 거들떠도 보지 않았습니다. 아파트마다 설치된 장비가 업체도 다르고 모델도 다르겠지만 저희 집에 붙어 있는 장비는 MAP-11NCV3라는 AP입니다. 이 글을 읽으시는 분들은 아마도 이것 때문에 오셨을 확률이 높겠지요? WAN : 전원이 들어왔는지 네트워크선이 연결되었는지 확인 WLAN : 무선 WiFi가 동작하는지 확인 전원 스위치 : 뽀족한 것으로 눌러야 전원이 토글 됨 리셋 스위치 : 5초 이상 길게 누르면 제품이 초기화됨 기본 WiFi 접속 정보 기본 WiFi에 접속하는 비밀번호는 입주시점에 알려줍니다. 하지만 몇 년이 지나고 살던 사람이 바뀌고 ..
