뉴스레터 | 디자인·AI·웹 트렌드 아카이브

API란 무엇인가

안녕하세요, 소이정입니다!오늘은 API가 무엇인지, 어떤 종류가 있는지 알아보려고 해요.그전에! 여러분은 API가 무엇인 지 알고 계시나요?그럼 먼저 API 개념부터 다양한 종류의 API까지 한 번 알아보도록 해요! API란 무엇인가요? Application Programming Interface의 줄임말로, 운영체제와 응용 프로그램 사이의 통신에 사용되는 언어나 메시지 형식을 말한다. *출처 : 두산백과 위에는 API의 사전적 의미인데요. 흠,,, 네,,,? 뭔 소리인지 하나도 모르겠어요... 싶으신가요?쉽게 설명하자면 '프로그램과 프로그램끼리 소통할 수 있는 도구다'라고 생각해 주시면 됩니다. 예시로 설명을 드릴게요. 여러분이 친구와 함께 음식점에 갔다고 가정을 해볼게요. 1. 손님은 직원이 가져다준 메뉴를 고른 후 음식을 주문합니다.2. 직원이 주문을 받아 요리사에게 음식을 요청합니다. 3. 요리사는 음식을 만들어 직원에게 전달합니다.4. 직원은 완성된 음식을 손님에게 가져다줍니다. 여기서 직원의 역할은 손님에게 주문을 받고, 요리사에게 메뉴를 요청합니다. 그리고 완성된 메뉴를 손님에게 전달도 하죠. 바로 이 직원이 API와 같은 역할을 한다고 보면 됩니다.API(직원)는 프로그램(손님)이 실행될 수 있도록 명령 목록(메뉴)을 정리하고, 명령(주문)을 받으면 응용프로그램(요리사)과 상호작용하여 명령에 대한 값(요청된 메뉴)을 전달합니다. 아래 시각적인 이미지를 본다면 이해가 좀 더 잘 되실 거예요! 출처 : 위시켓 그렇다면 API의 역할은 무엇인가요?1. 애플리케이션과 기기의 소통 창구 역

포토샵 보정법 알아보기

안녕하세요, 소이정입니다. 오늘은 포토샵 보정 레이어를 이용해사진 보정법을 알아보겠습니다.포토샵을 이용하는 이유는 뭐니 뭐니 해도사진 보정 아니겠어요?보정 레이어는 배경 레이어 위에 하나씩 얹는 방법인데요.작업을 한 뒤에 필요 없다고 생각되거나취소하고 싶다면 해당 보정 레이어를 숨기기만 하면 끝!따라서 사진에 직접적으로 적용하는 것보다훨씬 실용적이랍니다~!그럼 보정 레이어를 이용하여 사진을 수정하는 법 시작해볼까요? 비포 애프터 먼저 보고 가실까요? 잔디, 음료수, 음식 등 각각의 색감을 더욱 풍부하게 살리고 명도를 살짝 올려 화사한 느낌으로 수정하였습니다. 1. 보정할 사진 불러온 후 기존 레이어 복사 그럼 어떻게 하는 지 한 번 시작해볼까요~! 첫번째로 보정할 사진을 불러옵니다. 그리고 기존 배경 레이어를 하나 복사해주세요.복사하는 방법은 ctrl + c -> ctrl + v 하시거나 복사할 레이어를 선택한 후 새 레이어 쪽으로 끌어내리면 됩니다! 2. 보정레이어 선택하기 그 후에 두번째는 그림과 같이 보정 레이어를 선택해주세요! 다양한 메뉴들이 쭈르륵~나오죠? 먼저 저희는 명도/대비를 선택해서 명도를 높여볼게요. 3. 원하는 보정 진행하기 (1) 명도와 대비 조정먼저 명도와 대비부터 조정 해볼까요? 보정 레이어에서 수치를 조정해주면 됩니다. 자동을 누르면 알아서 수치를 정해주는데요.보고 마음에 든다면 그대로 진행하시고, 마음에 들지 않는다면 재조정하면 된답니다~ 3. 원하는 보정 진행하기 (2) 선택 색상 보정이번엔 색깔을 보정해볼까요? 원하는 색을 좀 더 진하게 하고 싶다면 선택 색

포토샵 클리핑 마스크 이용하기

안녕하세요, 소이정입니다!. 오늘은 포토샵 클리핑 마스크를 알아보겠습니다.저번 강좌인 레이어 마스크와 비슷한 기능이지만다른 방법이라고 생각하시면 이해하기 쉬우실 것 같아요!레이어 마스크와 클리핑 마스크를 모두 배워두고 둘 중 더 편한 방법을 사용해 보세요!그렇게 실력이 상승하는 거겠죠!그럼 클리핑 마스크 이용하는 법살펴보도록 하겠습니다~ 오늘은 완성 모습부터 보여드리겠습니다! 이런 식으로 디자인할 때 사용되는 클리핑 마스크!어떤 거냐고요? 한 번 보시죠! 클리핑 마스크란? 특정한 이미지를 원하는 부분만 잘라서 사용하기 용이한 기능 저는 피아노 이미지를 원형에 넣어 강조하는 이미지를 만들었어요. 1. 작업할 이미지 불러오기 작업할 이미지를 선택하여 불러옵니다. 파일을 선택한 후 드래그&드롭해 주시면 쉽게 불러올 수 있어요~ 2. 타원 그린 후 배경 레이어 복사하기 불러온 이미지 위에 원형의 도형을 얹어줄 거예요. 왼쪽의 툴패널에서 타원 도구를 선택해 주세요! 툴패널에 동그란 모양을 클릭해 주시면 되는데, 없더라도 당황하지 않고~ 사각형 모형에 우 클릭을 하면 타원 도구가 뜰 거예요. 여기서 꿀팁! 타원 도구를 선택한 후 Ctrl 을 누르고 그려주면 정원으로 그려집니다. 이제 배경 레이어를 복사해 주세요. 피아노 사진이 있는 레이어를 왼쪽 하단에 표시한 새 레이어 (빨간 네모)로 끌고 오면 새 레이어로 레이어가 복사됩니다. 복사된 레이어를 맨 위쪽으로 옮겨줍니다. 3. 클리핑 마스크 실행하기 레이어에서 우클릭을 하여 클리핑 마스크 만들기를 선택합니다. Ctrl + T를 눌러 사진 크기를 조정하면 이

포토샵 레이어 마스크로 합성하기

안녕하세요, 소이정입니다. 오늘은 아주 간단하지만 유용한 포토샵 편집 기술인 레이어 마스크로 이미지 합성하기를 배워보겠습니다.포토샵에서 이미지를 합성하는 방법은레이어 마스크 이외에도클리핑 마스크로도 가능한데요.하지만! 오늘은 레이어 마스크를 배워보도록 할게요.그럼 시작해 볼까요?! 꼬꼬 우선 합성하고자 하는 이미지를 준비합니다. 저는 아래의 TV와 자연 이미지를 합성해 볼게요. 출처 : freepik 그럼 시작해볼까요! 1. 이미지 불러오기 TV가 있는 이미지와 자연 이미지를 불러옵니다. 이미지 불러오기는 포토샵 영역으로 파일에 있는 이미지를 드래그 & 드롭해 주시면 돼요. 합성의 바탕이 되는 (TV화면-레이어0) , 합성을 하고 싶은 이미지(자연-레이어1)의 레이어를 맨 위에 놓습니다. 2. 레이어 마스크 활성화시키기 여기 보시면 레이어 0에 하얀색 이미지가 연결되어 있는 게 보이시죠?이게 바로 레이어 마스크입니다. 바탕이 되는 이미지에 구멍을 뚫어 그 밑의 이미지가 보이게 하는 개념이죠. 첫 번째 이미지 (TV가 있는) 레이어를 클릭한 후 Add layer mask 아이콘을 클릭해 주세요. 레이어 마스크가 씌여졌습니다. 3. 합성할 영역 지정 후 Fill(칠) 실행 합성을 진행할 영역을 지정해 주세요. 선택 툴 중 편한 툴로 영역을 지정해 주신 후 Edit- Fill (단축키 Shift + F5)를 실행해 주세요. 4. FILL(칠) - 전경색으로 변경 대화상자는 처음에 내용 인식으로 되어 있을텐데요.전경색을 지정해 주신 후 확인을 눌러주세요. 전경색으로 지정한 후 확인을 눌러주세요. 5.

프론트엔드와 백엔드

안녕하세요, 소이정입니다! 오늘은 개발 부분에 대해 소개해 드리려고 합니다.최근 몇 년 간 개발자를 구한다는 구인구직을 많이 접하셨을 것 같은데요. 개발자로 성장할 수 있도록 국가에서도 국비를 지원하며 공부를 돕고 있습니다. 2025년부터는 초등학교, 중학교에서 코딩을 필수과목으로 지정하여 교육을 의무화한다고 합니다. 이렇게나 중요해진 개발 분야에 관심이 생긴 분들도 많이 늘어나는 추세입니다. 그런데 말입니다,,,개발자를 서칭하다 보면 이런 단어들이 많이 보입니다. 프론트엔드 개발자, 백엔드 개발자...흠... 이게 무슨 뜻이죠? IT업계에서 쓰는 어려운 전문용어인가요?오늘은 바로 이 프론트엔드와 백엔드에 대해 알아보려 합니다!! 프론트엔드와 백엔드 개발이란? 소프트웨어나 하드웨어 등을 만들고 개선하는 과정을 일컫습니다. 이 과정에서는 문제를 해결하고 필요한 기능을 구현하기 위해 다양한 기술과 도구를 활용합니다. 프론트엔드 백엔드 정의 사용자가 웹이나 앱에서 직접적으로 보고 사용하는 영역 사용자가 직접 접근할 수 없는 관리자 영역 역할예시 드라마 내 배우 드라마를 만드는 PD와 작가 등의 스탭진 이게 무슨 소리지~ 싶으시겠지만! 지금부터 본격적으로 알아볼 거예요! 출처 : pixabay 프론트엔드란 무엇인가요? 1-1 프론트엔드 개념인터페이스(User Interface)라고 하며, 사용자가 웹사이트에서 바로 볼 수 있는 화면이라고 해요. 사용자가 보고, 조작하고, 상호작용하는 모든 것들을 포함해요. 여기서 인터페이스란, 슬라이더, 드롭다운 메뉴, 레이아웃, 폰트, 컬러 등의 요소들이 포함되어 있어요.1-2 프

포토샵 액션 기능 활용하기

안녕하세요, 소이정입니다. 오늘은 포토샵 액션 기능을 배워볼 거예요. 액션 기능을 간단히 설명하자면, 다양한 사이즈를 동일한 사이즈로 맞춘다거나같은 필터를 씌어야 한다거나 할 때 주로 쓰인답니다!똑같은 크기의 사진이 많이 필요한 경우일일이 모든 사진을 하나씩 정성스럽게 수정한다면시간이 너무 오래 걸리겠죠 ㅠㅠ포토샵에서 액션 기능은 대량 수정을 할 때 유리하답니다.Let's go go go~ 아까 언급했듯 다양한 사진을 한 번에 편집하기 위해 저희는 1920 * 1080의 화면 비율로 맞추고 흑백 효과를 줘볼게요.먼저 이미지를 준비합니다. 저는 멋있는 나무 사진을 가져왔는데요. 1. 포토샵에 이미지 불러오기 준비한 이미지를 포토샵에 불러옵니다. 준비한 사진의 사이즈는 1280*796 사이즈입니다. 2. 창(Window) - 액션(actions) 눌러 활성화시키기 본격적으로 액션 기능을 사용해 보려고 하는데요. 우선 상단 메뉴 1. 창(Window) - 2. 액션(Actions)를 눌러줍니다. 그러면 액션 기능을 사용할 수 있는 창이 활성화되는데요! 액션 기능 단축키는 Alt+F9이니 참고해 주세요~※ 액션이란? 문서를 하나씩 수정하기 번거로운 경우에 같은 액션을 한 번의 클릭만으로 반복할 수 있게 경로를 저장해두는 것. 3. 액션 기능 만들기 이미 있는 액션 기능들이 있지만, 저희는 새로운 액션을 만들 예정이니 맨 밑의 종이가 접혀진 모양(새 액션 만들기)을 클릭합니다. 이름은 액션 기능의 이름을 적으면 됩니다. 설정은 액션을 어느 폴더에 저장할 것인지 정하는 곳이며, 기능 키는 액션 단축키인데요

초보 웹디자이너, 웹기획자들 필독! UI/UX 란?

웹페이지 제작관련 공부하는 분들은 한 번씩 듣게 되는 용어가 있습니다. 바로 UI와 UX 디자인인데요.거의 함께 쓰이기 때문에 두 개의 차이점을 잘 알지 못하는 경우가 많습니다.함께 쓰이는 만큼 연관성이 깊은 UI, UX!오늘은 초보 웹디자인, 기획러를 위해 UI, UX의 뜻을 살펴보고 차이점을 알아보도록 하겠습니다~~ UI(user interface)란? 이용자 인터페이스휴대폰, 컴퓨터, 내비게이션 등 디지털 기기를 작동시키는 명령어나 기법을 포함하는 사용자 환경을 뜻한다. 이용자들이 IT기기를 구동하기 위해서 접촉하는 매개체로 컴퓨터를 조작할 때 나타나는 이른바 '아이콘'이나 텍스트 형태 구동화면도 포함된다. 스마트폰의 경우 애플리케이션 아이콘 형태 및 화면 구성을 가리킬 때가 많다.출처 : 네이버 지식백과 사전적인 UI의 의미인데요. 이게 정말,, 무슨 뜻이람? 싶으시죠?한마디로 디자인, 레이아웃 등 겉으로 보이는 모든 시각적 요소를 통칭한다고 보시면 됩니다. 눈으로 보이는 폰트, 레이아웃, 색상, 도형 등등 모~든~ 시각적인 요소를 뜻합니다.예시로 이미지를 가져왔는데요! 아래 이미지에는 어떤 UI요소가 있는 지 한 번 볼까요? - 로고와 타이틀을 좌우로 배치- VIDEO SITE 폰트는 아이콘의 두께와 비슷하게 구성- 재생화면은 가로로 넓고 크게 배치- 재생 아이콘이 흰색이고 재생화면 가운대 배치 - 재생화면 아래로 재생목록을 나열 UX(User Experience)란? 사용자 경험사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하게 되는 총체적 경험을 말한다.

더 나은 세상을 위한, 더 큰 영향력! 브라이언 임팩트

여러분들에게 더 나은 삶, 더 나은 세상은 무엇인가요? 로또 당첨을 바라며 매일 온 우주의 기운을 모아 기도하는 분, 깨끗한 지구를 위해 매일 아침 텀블러를 세척하시는 분, 매달 소액이라도 도움이 필요한 곳에 기부하는 분 등. 각자가 갖고 있는 신념대로 스스로의 삶을 위해, 더 나은 세상을 위해 작은 실천들을 하고 계실 것 같아요. 그런데 여기, 세계적인 억만장자들이 더 나은 삶을 위해, 더 나은 세상을 위해 사회에 약속하는 것이 있다고 하는데요! 바로 ‘더 기빙 플레지(The Giving Pledge)’입니다. 출처 : 더 기빙 플레지 홈페이지 더 기빙 플레지는 기부(Giving)를 약속(Pledge) 한다는 의미로 2010년 빌 게이츠 부부와 워런 버핏이 시작한 기부 클럽이라고 해요. 더 기빙 플레지의 회원이 되기 위해서는 몇 가지 조건이 있는데요. 먼저 10억 달러, 약 1조 원이 넘는 자산이 있어야 하고, 이의 절반 이상을 사회에 환원해야지만 자격 조건이 주어진다고 해요. 출처 : 카카오 홈페이지 국내에서는 배달의민족 창업자 김봉진 우아한형제들 의장과 김범수 카카오 이사회 의장이 더 기빙 플레지를 선언했습니다. 특히 김범수 의장은 독특하게 이를 실천하기 위해 ‘브라이언 임팩트’ 재단을 설립했는데요. 브라이언 임팩트는 단순히 누군가에게 기부를 하는 것이 아닌, 새로운 기술과 상상이 언제나 세상을 바꾼다는 신념으로 세상을 바꾸는 혁신가들과 여러 분야에서 성실하게 살아가는 사람들을 지원하는 공익 재단입니다. 출처 : 브라이언 임팩트 홈페이지 브라이언 임팩트에서 가장 중요한 사업은 임팩트 그라운드인데요. 임팩

진실 혹은 거짓? 재치 만점 만우절 마케팅!

1년에 딱 하루! 농담과 거짓말을 기꺼이 즐기는 날이 있죠. 바로 4월 1일 만우절입니다. 많은 기업들이 만우절을 활용하여 기존에 없었던 새로운 혹은 특이한 것들을 마케팅적 측면에서 선보이곤 하는데요. 이는 기업이 갖고 있던 딱딱한 이미지를 탈피할 수 있을 뿐만 아니라, 제품을 출시하기 전 소비자의 반응을 엿보는 기회가 되기도 합니다. 4월을 맞이하여 올해는 어떤 브랜드들이 만우절을 활용한 마케팅을 선보였는지 함께 살펴보려고 해요. 1. 우주에서 알바를?! 알바몬 X 이마트24 ‘우주알바모집’ 구인구직 서비스인 알바몬에 우주에서 아르바이트할 알바생을 구한다는 모집 공고가 올라왔습니다. 웬 우주냐고요? 이마트24와 알바몬이 만우절을 기념해 최대 시급 100만원을 지급하는 ‘이마트24 우주점 알바생 모집’ 이벤트를 선보인 것인데요. 우주점 알바생 테스트는 이마트24 우주점에서 근무하던 알바생이 퇴사하게 되면서 알바몬을 통해 새로운 알바생을 모집한다는 내용의 콘셉트로 진행되었습니다! 출처 : 이마트24 X 알바몬 단순히 공고를 올리는 것에서 그치지 않고, 진공 상태라 소리가 잘 전달되지 않는 우주의 특성을 고려해 면접이라는 명목하에 ‘청력 테스트’를 진행했는데요. 소리만 듣고 어떤 음식인지 맞춘다거나, 고객의 입 모양만을 보고 무엇을 말하는지 맞추는 등 편의점에서 발생할 수 있는 다양한 소리와 관련된 재치 있는 문제가 출제되었다고 해요. 알바몬은 만우절을 기념해 아르바이트생들에게 재미와 혜택을 제공하고자 이마트24와 함께 공동 이벤트를 기획하게 됐다고 해요. 앞으로도 다른 업종의 브랜드들과 협업하여 알바몬을 통해

SFTP 접속하는 방법 (Mac / Window)

안녕하세요, 소이정입니다. 오늘은 SFTP 접속 방법에 대해 공유하려고 해요.FTP, SSH 등등.. 연관 단어가 많고 생소해보이지만프로그램만 깔면 아무것도 아니라는 사실...!!여러분께 핵심적인 내용만 쏙쏙 뽑아 공유드리겠습니다. 우선, SFTP란 무엇이냐?Secure File Transfer Protocol. 즉, 직역하면 보안 파일 전송 프로토콜입니다.이것 저것 설명하자면 복잡하니 간단히 생각하면보안성있게 파일 전송을 하기 위한 장치라고 보시면 될 것 같습니다 :)명칭은 FTP지만 SSH 접속 포트를 이용하여 연결해야해요.뭔소리냐고요?백문이 불여일견.SFTP 접속하는 방법을 직접 보여드리지요. SFTP 접속하는 방법 (Mac / Window) Window (Filezilla) 윈도우에서 쓰는 SFTP 프로그램은 대표적으로 파일질라가 있어요.다른 프로그램도 있지만 비슷한 프로세스를 가지고 있으니, 참고하여 진행해주세요 :)우선 파일질라를 설치하세요. 설치가 끝나면 이런 화면이 나올거에요. 아직 서버가 연결되지 않았으니, 서버 연결을 하러 갈까요!아, 그 전에 연결해야할 서버의 호스트와 포트, 사용자와 비밀번호는 미리 알아두어야 합니다.준비가 끝났다면 파일 - 사이트 관리자에 들어갑니다. 이제 이곳에 연결하고자하는 지점을 입력해주세요. 아까 미리 알아두었던 호스트, 포트를 입력한 후 프로토콜을 SFTP로 바꿔주세요.이 때 FTP 포트가 아닌 SSH 접속 계정으로 로그인해야해요.로그온 유형도 일반으로 바꿔주신 후 사용자와 비밀번호를 입력해주세요.입력 예시 ) 짠! 위에처럼 입력한 후 연결을 누르면 요렇게 제