소이정이 자체 기획한 뉴스레터 콘텐츠로 실무 노하우, 마케팅/디자인 트렌드 등의 유용한 정보를 전합니다.

초보 웹디자이너, 웹기획자들 필독! 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 접속 계정으로 로그인해야해요.로그온 유형도 일반으로 바꿔주신 후 사용자와 비밀번호를 입력해주세요.입력 예시 ) 짠! 위에처럼 입력한 후 연결을 누르면 요렇게 제

이용약관 및 개인정보처리 방침 사용법

안녕하세요 소이정입니다. 여러분은 아래 이미지가어떤 사이트인지 아시나요? 출처 : 네이버 출처: 구글 정답은 사진 밑에 각각 적어두었는데요!인터넷에서 정보를 찾기 위해 여러 사이트를 돌아다니다 보면맨~하단에 이용약관, 개인정보처리방침 등등빠지지 않고 있는 것을 보셨을 것 같아요.그래서 오늘은! 항상! 사이트마다! 빠지지 않고 있는 메뉴 중이용약관과 개인정보처리방침이 어떤 역할을 맡고 있는지 알려드리려고 합니다.법과 관련이 있어 조금은 어려울 수도 있지만제가 차근차근 잘 설명해드릴 테니 쭈~욱 읽어주세요! 이용약관 이용약관이란 특정 서비스의 이용조건과 절차 등에 관한 사항을 규정하고 이를 명시한 문서를 말한다.이용약관은 서비스 이용자에게 공시함으로써 효력이 발생하며, 영업상 중요 사유가 있을 시 변경할 수 있다. 이용약관에는 이용계약의 체결, 서비스 이용, 이용자의 의무 등에 관한 조항을 상세히 명시해야 한다. 또 이용 요금 납부, 계약 해지 등의 사항을 구체적으로 기재하도록 한다. 그 밖에 면책조항을 기재하여 차후 발생할 수 있는 고객과의 갈등 상황을 사전에 방지하도록 한다. [네이버 지식백과] 이용약관 [利用約款, access terms] 요약하자면,특정 서비스의 이용조건과 절차 등에 관한 사항을 규정하고 이를 명시한 문서다!라고 생각하시면 되겠습니다.약관이란 기업이 제공하는 서비스에 대하여 고객에게 명확히 서비스 내용과 목적, 권리, 의무에 대한 설명하는 것을 의미하는데요.그렇다면 이용약관이 필요한 이유는 무엇일까요? 온라인이 발전함에 따라 인터넷 사용은 더욱 더 활발해졌는데요. 그만큼 분쟁도 더 많이 발

저작권 걱정 없는 무료 이미지 사이트 추천

안녕하세요, 소이정입니다. 디자인을 공부하는 학생이나, 디자인 업계에 종사하고 계신 분들.아,,, 이런 느낌의 이미지가 필요한데,, 어디없나..?라고 생각하신 적 있으신가요?그 외의 다양한 분들도 특정 이미지가 꼭 필요한 경험을 한 번쯤은 해보셨을 거예요.물론 창작물에 대한 저작권은 소중하기 때문에 유료 이미지를 쓰는 것이 가장 좋지만그럴 수 없는 경우에 오늘 소개해드리는 사이트들을 참고해보세요.그냥 디자인 레퍼런스용으로 활용하기에도 좋답니다. 세상은 넓고 무료 이미지는 많다..!유료 이미지 못지않게 훌륭한 퀄리티의 이미지들을 모아놓은 사이트들을 소개해드릴게요.꼬꼬! STOCK UP 무료 이미지를 배포한 다양한 사이트에서 이미지를 수집해서 한 번에 볼 수있는 사이트인데요. 현재 31개 웹사이트에서 3만 여장의 이미지를 제공하고 있다고 해요!여러곳을 둘러볼 필요 없이 한 곳에서 해결할 수 있다는 점이 큰 장점이랍니다! ▶https://stockup.sitebuilderreport.com/◀ PIXABAY 무료 이미지들 뿐만 아니라 벡터, 일러스트레이션, 동영상, 음악, gif까지 보유하고 있는 거대한 사이트인데요. 상업적 이용이 가능하며, 별도의 출처 표시도 필요없답니다.한국어로 검색도 가능하지만, 영어로 검색하면 더 많은 검색 결과를 확인할 수 있습니다! ▶https://pixabay.com/◀ GRATISOGRAPHY 재미있고 독특한 시각의 이미지를 모아둔 곳인데요. 해당 사이트 메인만 보아도 GRATISOGRAPHY의색을 알 수 있답니다. 감성적인 이미지, 빈티지 느낌의 이미지, 키치한 이미지들도 많다고

홈페이지형 블로그 만들기 2탄

안녕하세요. 소이정입니다. 오늘은 지난 포스팅에 이어 홈페이지형 블로그 만들기 제2탄을 들고 왔습니다.저번에 말씀드렸다시피 홈페이지형 블로그를 제작하려면첫째, 레이아웃 변경둘째, 스킨 변경을 해야 합니다.첫째는 1탄에 나와있으니 궁금하신 분은 목록에서 홈페이지형 블로그 만들기 글을 확인하세욧!하여, 오늘은 바로 홈페이지형 블로그 스킨 변경을 할 겁니다.그럼 바로 시작! 저번에 멈춘 곳부터 시작해 봅시다. 스킨이 적용되지 않은 블로그 형태입니다. 여기에 스킨을 만들어 적용해 봅시다!가장 먼저 알아야 할 것은 홈페이지형 블로그 스킨의 사이즈입니다.타이틀 : 가로 966px, 세로 50~300px 스킨 : 가로 1920px, 세로 마음대로마음대로라는 뜻은 스킨은 말 그대로 화면 자체를 이야기하기 때문에 길이 제한이 없어요.타이틀처럼 상단에만 적용되는 것이 아니라 전체적으로 적용이 가능합니다. 그래서 여러분 원하는 대로 제작하시면 됩니다!짠. 예시를 만들어보았습니다. 포토샵에서 위에 제시한 가로, 세로를 지켜서 취향에 맞게 꾸며보세요.저는 예시를 쉽게 보여드리게 위해 텍스트를 넣은 이미지를 가져왔어요. 이제 적용을 해야 하는데요. 내 메뉴를 누르면 다른 기능 주르륵 나온답니다. 그중에서 세부 디자인 설정을 클릭합니다. 어라라.. 전 글을 쓴 적이 없는데 왜 아래 화면이 나오나,,, 싶으시죠?리모콘 기능이 무엇인지 설명을 해주는 안내예요. 리모콘 기능을 다 사용하고 창을 닫으면 사라지니 당황하지 않고 오른쪽 상단에 있는 리모콘에 집중해 주시면 된답니다! 리모콘 기능을 확대해서 살펴볼까요? 스킨 배경부터 위젯까지 수정

홈페이지형 블로그 만들기

안녕하세요. 소이정입니다. 오늘은 홈페이지형 블로그 만들기를 포스팅하려 합니다.네이버에서 제공하는 기본 형태의 방법으로도 블로그를 꾸밀 수 있지만,블로그를 홈페이지처럼 꾸미는 방법도 있다는 걸 알려드리려고 해요!개인 블로그를 운영하고 싶은데좀 더 멋지게 꾸미고 싶다! 하시는 분들기본 레이아웃만 바꿔도 멋짐 폭발 블로그를 만들 수 있으니지금부터 팔로팔로미~ 우선 본인 블로그 관리 ·통계 메뉴로 들어갑니다. 그러면 아래 화면이 나타나는데요.이후 꾸미기 설정을 눌러줍니다. 홈페이지형 블로그를 만드려면 타이틀을 없애고 스킨으로만 꾸미는 것이 좋은데요. 그러려면 우선 레이아웃 형태를 바꿔야한답니다!그래서 오늘은 레이아웃을 바꾸는 작업을 진행 할 거에요.스킨은 크기에 맞는 이미지를 만들어야하기 때문에 레이아웃처럼 바로 바꿀 수 없는데요 ㅠㅠ우리는 마음이 급하니까 할 수 있는 것부터 후딱 합시다!첫번째로 레이아웃, 위젯 설정을 클릭하면 왼쪽 사진처럼 설정이 되어있거나 다른 레이아웃으로 되어있을텐데요.오른쪽 사진에 보이는 거처럼 오른쪽 끝에서 두번째 위젯을 선택해줍니다. 레이아웃이 달라졌죠? 이외에도 다양한 레이아웃들이 있으니 추후에 사용해보시길 바랍니다.그럼 이제 다음 단계로 넘어갈게요. 빨간 표시된 부분은 블로그를 홈페이지처럼 보이게 화면 상단을 늘려주는 역할을 하는데요.하지만!!! 여러분은 지금 이 위젯이 없을 거에요,,ㅠㅠ 그래서 지금부터 이 위젯을 어떻게 만드는 지 알려드리려고해요.먼저 레이아웃을 빨간 표시된 설정으로 바꾸어 준 걸 다시 한 번 체크한 후 아래 위젯직접등록을 눌러줍니다. 그럼 아래와 같이 생긴 창이

웹기획자들을 위한 툴

안녕하세요. 디자인 소이정입니다.오늘은 웹기획자들이 사용할 수 있는 툴들을 소개해드리려고 해요! 오늘 소개해드리는 다양한 툴들을 한 번씩 사용해보시고여러분과 잘 맞는 툴로 정착해서 사용하시면 좋을 것 같습니다~그럼 어떤 툴들이 있는지 함께 보시죠! 1. PPT + PPT MOCK UP마이크로소프트에서 개발한 파워포인트는 다양한 곳에서 유용하게 사용하고 있죠. 또한, 웹기획에서도 가장 많이 쓰이고 있는데요! 이 외에 파워포인트와 함께 사용 가능한 프로그램이 한가지 있다고 해서 알려드리려고 해요.그 프로그램은 바로 "PPT MOCKUP" 인데요.웹기획을 할 때에 있어 필요한 기능들을 추가적으로 넣어두었다고 합니다.파워포인트가 가진 강점을 그대로 활용하며, 부족한 부분을 일부 보완해주는 좋은 프로그램이죠.이런 점을 보아하니! 딱! UI/UX디자인, 프로토타입 제작 등에 특화되어 있다는 것을 알 수 있죠 ! ▷ PPT와 파워목업의 좋은 점- 수백종의 레이아웃과 컴포넌스, 차트, 폼, 버튼, 이미지 등 끌어다 놓기가 가능- 정기구독이 아닌 한 번 구입으로 영구 사용 가능 ▷PPT와 파워목업의 아쉬운 점- 실제와 유사한 화면을 보여주기 어려움- UI엘리먼트가 다양하지 못하다는 점- 유료 플러그인이라는 점 무엇보다 파워포인트가 익숙한 분들에게는 친숙하다는 점이 최고의 장점이겠죠?현재, 파워목업에서는 블로그에 포스팅을 하면 라이선스를 주고 있다고 하는데요! 조건은 있지만, 참고하셔서 라이선스를 무료로 취득하시면 좋겠습니다 ㅎㅎ https://www.powermockup.com/ PowerPoint Wi

SNS 이미지 최적 사이즈 모음

안녕하세요. 소이정입니다. 인스타그램 / 유튜브 / 페이스북 / 트위터 등소셜에 올리는 이미지마다 최적의 사이즈가 있다는 사실을 아시나요?각 SNS 별로 최적의 사이즈로 디자인을 해야 품질 저하를 막을 수 있답니다!예쁘게 만든 결과물이 다 깨져버리면 너무 슬프잖아요ㅠㅠ그래서 소셜미디어 매체별 이미지 사이즈 가이드를 정리해보았는데요.바로 보시죠! 그 전에 잠깐! 1. 모든 이미지는 픽셀(px)단위입니다.2. 가이드된 사이즈도 중요하지만, 비율도 중요합니다. (ex : 500x500 이지만 600x600으로 해도 문제가 되진 않습니다. 1:1비율만 지켜주면 되는 것)3. 가이드 된 사이즈보다 크게하는게 좋아요. 최적화 이미지 사이즈보다 작으면 자동으로 사이즈를 크게 잡아 해상도가 떨어집니다. 페이스북 인스타그램 유튜브 트위터 여기까지 SNS 최적화 이미지를 알아보았는데요.별도로 가이드라인 psd 파일을 제공하는 곳도 있으니,파일을 받아 두는 것도 실용적이라고 생각합니다 :)또, 각 소셜마다 허용되는 용량도 정해져있는데요.만약 용량이 너무 커서 업로드가 되지 않는다면품질을 낮추어 저장 후 다시 한번 진행해보시기 바랍니다.그럼 다음에 또 다른 유익한 정보로 찾아오겠습니다.감사합니다~!