designup80의 등록된 링크
designup80로 등록된 네이버 블로그 포스트 수는 88건입니다.
웹디자인 FAQ-웹디자이너는 미술 감각이 있어야 하나요? [내부링크]
웹디자이너를 하려면 미술 감각이 좋아야 하나요? 네 맞습니다. 매우 아주 중요합니다. 미술 감각, 디자이너의 센스는 디자인 업무에 있어서 일을 아주 수월하게 해 줍니다. 그리고 반대로 디자인 감각이 없으면 디자인 업무가 상당히 고되고 힘들고 짜증 나고 재미없기 때문에 "난 디자이너랑은 안 맞는 것 같아." 뭐 이런 생각을 하고, 서너 달 버티다가 딴 일 찾아보는 신입 디자이너도 꽤 많습니다. 이처럼 디자이너를 직업으로 삼기 위해서는 미술 감각, 디자이너의 센스는 아주 아주 아주 중요합니다. 하지만 미술 감각이 없다는 게 디자인을 포기해야 하는 이유까지는 될 필요가 없다고 생각합니다. 미술 감각은 후천적으로 분명 좋아지거든요. 오늘 내용은 제 주관적인 생각이 다분히 들어갈 것 같습니다. 이점 참고하시고 끝까지 영상을 봐주시면 감사하겠습니다. 디자이너의 감각은 후천적으로 발전할 수 있습니다. 디자인 감각은 선천적으로 타고나는 것이라고 생각하시는 분들도 있는 것 같은데요, 제 경험에 의하
웹디자인 FAQ-웹디자이너는 그림을 잘 그려야 하나요? [내부링크]
"웹디자이너는 그림을 잘 그려야 하나요?"라는 질문에 제 결론부터 말씀드리자면 그림을 그려야 하는 디자이너는 그림을 잘 그려야 합니다. 하지만 그림을 안 그리는 디자이너는 그림을 못 그려도 됩니다. 너무 당연한 답변이고 김빠지는 답변이죠. 하지만 이게 맞습니다. 웹디자인이라는 게 여러 분야가 있고, 또 여러 분야의 웹디자이너들마다 하는 업무가 다르기 때문에 웹디자이너에게 "드로잉 능력이 필요하다, 필요 없다"를 논하기에는 좀 무리가 있습니다. 모든 웹디자이너가 그림을 그리지는 않거든요. 오히려 그림을 그리지 않는 웹디자이너가 훨씬 많다고 생각합니다. 하지만 그림을 그리지 않는다고 해서 웹디자이너라고 해도 그림을 잘 그리면 여러 가지로 확실히 많은 도움이 될 것입니다. 그림을 잘 그리는 스킬을 하나 가지고 있으면, 내가 표현하고 생각하는 범위가 넓어지기 때문에 보다 더 다양한 분야의 디자인을 도전할 수가 있거든요. 따라서 드로잉 능력이 모든 웹디자이너의 필수 역량은 아니지만 그래도 드
웹디자인 FAQ-좋은 사수를 만나야 실력이 금방 늘어난다고 하는데요, 어떻게 하면 좋을까요? [내부링크]
이번 영상은 심하게 주관적이기도 하고, 또 꼰대라는 느낌도 받으실 수 있을 것 같고... 여하튼 기분이 살짝 나쁘실 수도 있습니다. 하지만 이게 진짜 현실일 수도 있으니까 웹디자이너를 준비하시는 분들은 꼭 봐주셨으면 좋겠네요. 좋은 사수를 만나야 많이 배울 수 있고 실력이 금방 늘어난다고 하는데요, 어떻게 하면 좋을까요? 솔직히 이건 운이죠. 미리 회사에 들어가서 경험해볼 수 있는 것도 아니고 취업 앱이나 인터넷 댓글로 알아보는 것도 한계가 있고. 좋은 사수를 만나는 건... 내가 관여할 수 있는 선택의 영역이 아닙니다. 그냥 인복이고 행운인 것이죠. 웹에이전시를 가면 실력 있는 사수를 만날 수 있다? 혹은 경험이 많은 사수를 만날 수 있다? 이런 식의 추측은 가능하겠지만 이런 추측도 변수가 많기 때문에 행운의 영역이라 보는 게 맞습니다. 그리고... 내가 아닌 사수와 같은 타인에게 나의 성장, 나의 미래를 기댄다는 건 매우 위험하고 생각합니다. 그래서 오늘 영상에서는 좋은 사수를
웹디자인 FAQ-좋은 회사에 들어가고 싶습니다. 어떤 기준이 중요한가요? [내부링크]
누구나 당연히 좋은 회사에 들어가고 싶죠. 그래서 각자의 기준에 따라 좋은 회사를 구분할 것입니다. 좋은 회사를 구분하는 기준이라 하면 연봉, 복지, 네임벨류, 회사의 위치 등 여러 기준이 있을 텐데요, 뭐.. 연봉이나 복지에 대해서는 인터넷에서 이미 쉽게 정보를 얻을 수가 있기 때문에 제가 굳이 언급할 필요가 없을 것 같고요, 그래서 오늘은 제가 좋은 회사를 구분하는 기준인 회사의 가치관에 대해 이야기해보겠습니다. 회사의 가치관은 직원들의 성장에 매우 밀접한 영향을 줍니다. 솔직히 우리는 고액 연봉으로 시작하는 회사원이 아니라 연봉 2천 언저리에서 시작하게 되는 생계형 웹디자이너입니다. 뭐 경우에 따라 연봉 3천 넘게도 받을 수 있겠지만... 그래도 현실상 우리 상황에서, 우리 능력에서 연봉이나 복지를 따지고 따져봐야 거기서 고만 고만한 게 사실입니다. 연봉 2천, 3천... 맘에 드시나요? 아니잖아요. 더 벌고 싶잖아요. 그래서 우리와 같이 초봉이 낮은 사람들에게는 고액 연봉으로
내가 원하는 디자인을 할 수 있는, 내가 원하는 회사에 취업하세요. [내부링크]
웹디자인 분야는 다양합니다. 그리고 대부분의 웹디자이너들은 어느 한 분야에 집중하고 그 분야의 전문 디자이너로 성장하게 됩니다. 따라서 이제 막 취업을 준비하시는 예비 웹디자이너분들도 어떤 디자인 분야가 나의 길인지를 미리 선택하고 이에 맞는 준비를 해야지만 내 전문 분야의 실력을 증명할 수 있는 맞춤형 포트폴리오도 준비할 수 있을 것이고 또 그 분야의 스킬이나 각종 무기들도 준비하고 장착할 수가 있겠죠. 이렇게 해야지만 내가 원하는 그리고 내가 바라는 회사에서 만족스러운 회사 생활을 하게 될 것입니다. 같은 웹디자이너라고 하더라도 하는 일이 모두 다릅니다. 요리사로 비유를 들어볼게요. 요리사는 한식, 일식, 중식 등 다양한 분야가 있고 호텔, 고급 레스토랑부터 김밥천국, 동네 중식당까지 다양한 일터가 있습니다. 거기서 탕수육을 만드는 일, 수육을 삶는 일 등 다양한 직무를 하게 되겠죠. 웹디자이너도 비슷합니다. 서비스 화면의 UI/UX 디자인을 하는 디자이너도 있고 기업 홈페이지를
웹디자인 FAQ-웹디자이너를 하려면 자격증이 필요한가요? [내부링크]
웹디자인 자격증이 필요한가요? 혹은 자격증이 있으면 도움이 되나요? 라는 질문을 흔하게 접합니다. 결론부터 말씀드리면... 물론 없는 것보다는 좋겠죠. 이력서에 자격증이 있다고 넣는 것만으로도 어느 정도의 내 가치를 증명할 수는 있겠죠. 근데 너무 큰 기대는 하지 마세요. 자격증을 따는 목적이 내 능력을 인정받고 이로 인해 취업에 유리하기 위함이라면... 글쎄요... 채용 담당자마다 다르고, 어떤 자격증인지에 따라 다르겠지만 제 기준에서는 별로 큰 도움이 되지 않을 것 같습니다. 그럼 왜 자격증의 기능에 대해 부정적으로 생각하는지 지금부터 자세히 말씀드려 볼게요. 자격증보다 포트폴리오가 확실합니다. 웹디자인 관련 자격증을 찾아보면 기능사, 산업기사, 기사, 기타 등등 여러 가지가 있는 것 같은데요, 사실 저는 디자인 자격증도 없고, 따려는 시도조차도 하지 않았기 때문에 솔직히 이 자격증이 무슨 실력을 증명하는지 자세히는 모릅니다. 대충 시험과목만 보고 예상만 할 뿐인데요, 그래도 제
웹디자인 FAQ-웹디자이너가 웹퍼블리싱(코딩)도 배워야 하나요? [내부링크]
요즘 웹디자이너는 html, css, 자바스크립트와 같은 웹퍼블리싱, 코딩도 배워야 하나요? 라는 질문인데요... 이 부분은 참 말씀드리기 어렵네요. 저는 아니라고 말씀드리고 싶은데요... 웹디자이너는 코딩이 아니라 디자인에 집중해야 한다고 말씀드리고 싶은데요... 하지만 현실적으로, 특히 생계형 웹디자이너로 살아가기 위해서는 필요 없다고 말씀드릴 수가 없을 것 같기도 합니다. 이 부분은 아무래도 직접 판단하시는 것이 좋을 것 같습니다. 각자의 상황과 각자의 진로에 따라 필요할 수도 있고 필요 없을 수도 있기 때문에 제가 감히 필요하다, 필요 없다를 말씀드리는 건 아닌 것 같고 지금부터 제 주관적인 생각을 보다 더 자세히 말씀드리겠습니다. 웹디자이너는 디자인 일을 하는 사람입니다. 웹퍼블리싱은 웹퍼블리셔가 하는 일입니다. 정확히 따지면 디자이너의 직무가 아닙니다. 웹디자이너는 디자인을 하는 사람이라는 것을 잊으시면 안 됩니다. 이렇게 각자의 직무가 있기 때문에 당연히 딴 데 눈 돌리
상업용 가능! 무료 이미지 소스 사이트 정리했습니다. [내부링크]
상업용으로도 가능하고 출처 표기를 안 해도 되는 사이트 위주로 골라봤습니다. 아래 링크에서 언스플래시, 펙셀즈, 픽사베이를 포함한 더 많은 이미지 소스 사이트를 확인하실 수 있습니다. ※ 카카오 뷰의 큐레이션 서비스로 만들어졌으며, 수시로 업데이트될 예정입니다. https://view.kakao.com/v/_IxbXKb/EQmYNlwPoN 상업용 가능! 무료 이미지 소스 사이트 정리했습니다. 상업용 가능! 무료 이미지 소스 사이트 정리했습니다. view.kakao.com 제 개인적으로는 펙셀즈를 아주 잘 활용하고 있습니다. 사이트 디자인도 깔끔하고 그래서 그런지 사진들도 더 깔끔해 보이는 것 같네요 ㅎㅎㅎ 또한 동영상 소스의 퀄리티도 아주 좋습니다! 웹디자이너뿐만 아니라 블로그를 운영하시는 분들에게도 유용할 것 같고요, 동영상 소스도 있으니 영상 제작을 하시는 유튜버 분들에게도 도움이 될 것 같습니다. 그리고 무료로, 안전하게 사용하실 수 있습니다. #무료이미지 #무료이미지소스 #무
쓸만한 목업 무료 사이트 정리했습니다. [내부링크]
생계형 웹디를 위한 목업 무료 사이트를 골라봤습니다~ 무료지만 유료만큼 아주 쓸만합니다 ^^; '목업 소스' 이미지 란? 목업 소스 이미지는 이런거예요~ 명함 종이를 예를 들어보자면, 이렇게 그냥 빈 명함 이미지처럼 보이지만 이 목업 소스 이미지를 포토샵으로 열어보면 [스마트 오브젝트] 라는 레이어가 있거든요, 이 스마트 오브젝트 레이어에 원하는 이미지를 넣기만 하면 이렇게 자연스럽게 명함에 인쇄가 된 것처럼 합성이 됩니다. 만약 스마트 오브젝트가 없다면, 이미지를 늘리고 줄이고, 비율을 조정하고, 모양을 왜곡하고, 색상도 맞춰야 하는 아주 번거로운 작업이 필요하겠죠. '목업 소스' 사이트 소개 아래 링크에서 제가 찾은 다양한 목업 무료 사이트를 확인하실 수 있습니다. https://view.kakao.com/v/_IxbXKb/E5XdtgYCf5 쓸만한 무료 목업 소스 사이트 정리했습니다. 쓸만한 무료 목업 소스 사이트 정리했습니다. view.kakao.com 카카오 뷰의 큐레이션
웹디자인 FAQ-웹디자이너에게 학력, 스펙이 중요한가요? [내부링크]
웹디자이너를 하려면 대학을 나와야 하나요? 학력, 스펙이 중요한가요? 결론부터 말씀드리면 반반입니다. 웹디자이너에게는 포트폴리오가 있기 때문에 졸업장이나 별다른 스펙은 필요 없다고 말씀하시는 분들도 있습니다. 하지만 저는 전문대 졸업장 정도는 있으면 좋다고 생각합니다. 따라서 학교 성적이 좋지 않아서 4년제는 못 가는 상황이라면, 그래도 전문대 졸업장 정도는 따놓는 게 좋지 않을까... 조심스럽게 말씀드려봅니다. 디자이너만 놓고 보면 졸업장이 필요 없다고 말씀드릴 텐데요, 대한민국이라는 조직에서 활동하려면 필요할 때도 있거든요. 오늘은 이에 대해 좀 더 자세히 이야기를 해보겠습니다. 대학(명문대) 졸업장은 만능 자격증입니다. 대한민국에서는 졸업장이 단지 해당 대학에서 해당 전공과목을 배웠다는 증명서로만 끝나는 것이 아니죠. 실제로 졸업장이 주는 가치는 학력 증명의 가치보다 훨씬 큽니다. 이해를 돕기 위해 극단적인 비유를 들어볼게요. 일단 명문대를 나오면 뭐든지 잘할 것이라고 생각합니
웹디자인 FAQ- 이과,문과생도 할 수 있나요? 미술 전공자가 아니면 힘든가요? [내부링크]
미술을 배워야 하나요? 미술 전공자가 아니면 힘든가요? 미술을 못해도 할 수 있을까요? 라는 질문인데요. 결론부터 말씀드리면 제 주관적인 경험과 생각으로는 미술을 못해도 디자인을 할 수 있습니다. 보통 디자이너라 하면 이쁘고 아름답고 보기 좋은 결과물을 만들어내는 사람이라 생각하죠? 네 맞습니다. 또 그러기 위해서는 당연히 색상, 폰트, 레이아웃, 비율 등의 미술 관련 지식이 필요합니다. 하지만 디자인은 단지 이런 심미성만을 추구하는 작업이 아닙니다. 디자인은 목적도 중요하고 기능도 중요하고 또 경제성까지도 고려해야 하는 작업입니다. 이렇게 디자이너는 단지 미를 추구하는 사람이라고 볼 것이 아니라 보통의 직장인들과 같이 보통의 프로젝트를 수행하는 일반 사무직 직장인으로 보셔도 됩니다. 거기에 약간의 미를 넣어주고 섞어주고 잘 버무리면 되기 때문에 본인이 디자인을 하고 싶다는 마음만 있다면 일반 문과, 이과 분도 충분히 할 수 있다고 생각합니다. 오늘은 이에 대해 자세히 이야기를 해보
마우스를 의인화한 '디자인업 캐릭터' 디자인 [내부링크]
드디어 디자인업 캐릭터를 만들었습니다. ^^ 방문자들의 머릿속에 디자인업의 이미지가 잘 각인될 수 있도록 열일을 할 것입니다. 신분 노출을 할 수 없는 저를 대신하여 많은 활동하기를 기대합니다. DESIGNUP Character Design 웹디자이너의 생각을 시각적으로 표현해주는 마우스를 의인화하여 캐릭터를 만들었습니다. 커다란 눈망울에서 많은 호기심과 긍정적인 기운이 느껴지는 디자인업 캐릭터입니다. 가슴팍 가운데에는 커다란 명찰도 넣었습니다. 자신을 알리는데 명찰만큼 직관적인건 없겠죠? ^^; Mockup 브랜딩에 있어 '캐릭터'가 필요한 이유 기사 출처 : https://stonebc.com/archives/5319 브랜딩 요소로서 '캐릭터'의 강점 6가지 적용성 대상의 특징을 간결하게 응축한 시각물이기 때문에 다양한 매체에 적용이 쉬움 생명력 캐릭터를 바탕으로 애니메이션을 비롯한 다양한 콘텐츠가 만들어지면 살아있는 생명체와 같은 느낌을 줄 수 있음 표현력 브랜드의 특성과 이야
마우스를 단순화하여 만든 디자인업 심볼과 로고타입입니다. [내부링크]
심볼제작은 퍼스널 브랜딩의 시작이 아닌가 싶습니다. 유튜브, 블로그, SNS 등 요즘 웹서비스에는 자신을 대표하는 프로필 사진(프사)을 넣은 곳이 꼭 있거든요. 그래서 심볼을 제작하였습니다. 앞으로 온라인 모든 서비스 첫 화면에서 디자인업의 이미지를 홍보해줄 심볼을 소개합니다! DESIGNUP Logo Design 웹디자이너의 생각을 시각적으로 표현해주는 마우스를 단순화하여 심볼로 만들었습니다. 로고타입의 폰트는 네이버 나눔 스퀘어 라운드를 사용하였으며 생계형 디자이너의 성장을 나타내는 상향 화살표를 함께 넣었습니다. Mockup #로고디자인 #심볼디자인 #로고타입 #CI #BI
그로스업 인스타그램에서 사용한 피드 디자인입니다. [내부링크]
개인의 성장과 성공을 함께 하는 자기 계발 파트너, 그로스업에서 운영하는 '부지런한 인스타그램' 입니다. https://www.instagram.com/growthup.kr/ 그로스업(@growthup.kr) • Instagram 사진 및 동영상 팔로워 20명, 팔로잉 16명, 게시물 71개 - 그로스업(@growthup.kr)님의 Instagram 사진 및 동영상 보기 www.instagram.com 나의 성장이 부족하다면. 지금 바로. 팔로우 RUN~ 그로스업 (growthup) Instagram feed Design feat. 글래스모피즘 글래스모피즘 스타일로 표현한 퍼즐 형식의 인스타그램 피드 디자인입니다. 썸네일 이미지 뒤에 숨겨 있는 콘텐츠를 알리기 위해 본문 내용 중 대표 키워드를 발췌하여 디자인하였습니다. Mockup #웹디자인 #인스타그램디자인 #인스타그램피드디자인 #인스타그램퍼즐디자인 #콘텐츠디자인 #글래스모피즘
사장과 블로거가 함께 성장하는 사블랑카페의 심볼과 로고타입입니다. [내부링크]
음식점 사장님들의 광고비 절감을 위해 시작한 사블랑카페입니다. 이제는 음식점 뿐만 아니라 많은 업종의 소상공인 사장님들께서도 잘 활용하시는 것 같아 뿌듯합니다 ^^; 전문 마케팅 업체의 전문 서비스와는 비교할 수 없지만 사장님들과 블로거님들의 상생과 협력으로 무궁무진한 더 큰 시너지 효과를 기대해 봅니다. 사블랑 카페 Logo Design 사블랑의 심볼마크는 사람이 체인 형태로 함께 어우러지는 모습을 표현하고 있으며, 이는 사장과 블로거의 상생과 협력으로 함께 성장하겠다는 의지를 담고 있습니다. 모토 & 슬로건 '무료체험' 이 아닌 '상생협력'으로 함께 합니다. 함께하는 우리, 사블랑카페입니다. 폰트 (서체) 대한민국 1등숙박앱 ‘여기어때’ 에서 제공하는 잘난체 폰트를 사용합니다. 색상 컨셉 사블랑 Yellow는 사장님이 체험단을 맞이하며 느끼는 행복, 친근감, 환영을 상징하는 색이며, 사블랑 Red는 체험단이 가지고 있는 열정과 의지를 상징하는 색입니다. Mockup #로고디자인
'생계형 웹디 캐스트'의 유튜브 배너 디자인입니다. [내부링크]
생계형 웹디자이너의 성장을 위해 함께하는 '생계형 웹디 캐스트"의 유튜브 채널 아트 디자인입니다. 채널을 방문해주시는 분들의 기억속에 저희 채널의 이미지를 각인시키기 위해 제작하였습니다. 생계형 웹디자인 캐스트 Youtube Banner Design 애플의 원버튼 마우스가 아닌, 윈도우 두버튼 마우스를 중심으로 화려하고 감성적인 디자인이 아닌, 각박하고 현식적인 생계 전선에서의 웹디자인을 묵묵히 표현하였습니다. Mockup 마무리 글 학원 출신 비전공자, 직장인 웹디자이너분들은 아래 생계형 웹디 캐스트를 통해 생계유지로 가려져 찾지 못했던 디자인의 숨겨진 가치들을 함께 찾아보세요. https://www.youtube.com/channel/UCDxKDDwZvrCegkOXqiK1wyQ 생계형 웹디자인 캐스트 - 디자인 계발 파트너 반갑습니다. 디자인업입니다. 생계형 웹디자이너의 성장을 위한 영상을 올리는 '디자인 계발 파트너' 채널로 계속 함께 하겠습니다. 생계유지로 가려져 찾지 못했던
유튜브 소개 <GCFLearnFree.org>, 초보 웹디자이너는 꼭 한번 봐주세요. [내부링크]
이번 영상에서는 그래픽 디자인의 기본 요소를 재미있게 설명해 주는 영상을 소개해 드립니다. 이렇게 기본적인 걸 모르는 디자이너도 있나?라고 생각하시는 분들도 있을 것입니다. 근데 실제로 이런 기본적인 상식을 모르는 디자이너도 분명 있고요, 그리고 이런 기본적인 상식은 단지 이성적으로 아는 것이 중요한 게 아니라 우리의 이성 영역이 아닌 무의식 영역 속에 저장되어 있어야 이성적 판단이 아닌 무의식적으로, 즉각적으로 반응하듯 작업에 자연스럽게 적용할 수가 있거든요. 그래서 본인이 이런 기본 상식을 분명 알고 있음에도 잘 활용하지 못하는 분들도 많을 것입니다. 그래서 준비했습니다. 오늘 영상 시작하겠습니다. 채널 소개 오늘 소개할 채널은 GCFLearnFree.org 입니다. 채널명에서 알 수 있듯 원래는 유튜브 채널이 아닙니다. 원래는 온라인 교육 사이트입니다. 따라서 웹사이트로 접속하시면 더 다양한 강좌 영상들을 볼 수 있다는 것을 말씀드리고요. 간략히 사이트 소개를 하자면 2000년
웹디자인 분야는 무엇인지? 어떤 디자인 직무를 선택해야 하는지 간략히 알려드립니다. [내부링크]
웹디자인 분야는 다양합니다. 쇼핑몰에서 하는 상세페이지 디자인은 웹디자인이라 하기도 하고 PC나 스마트폰 홈페이지의 UI 디자인을 웹디자인이라 하기도 하고 랜딩페이지나 뉴스레터를 만드는 것도 웹디자인입니다. 이뿐만 아니라 웹에서 디자인하는 모든 디자인이 웹디자인이라 할 수 있습니다. 청바지, 정장, 티셔츠, 양말 등 모든 패션 분야가 패션디자인인 것처럼 또 티브이, 스마트폰, 각종 생활용품을 디자인하는 것을 프로덕트 디자인(제품 디자인) 이라 하는 것처럼 웹디자인도 분야가 아주 많습니다. 그래서 같은 웹디자이너라고 하더라도 각각 하는 일도 많이 차이가 날 수 있습니다. 일반인들은 그냥 대충 알아도 상관없지만 앞으로 웹을 통해 디자인을 하는 일을 직업으로 삼고 싶은 분들은 그냥 단순히 웹디자이너가 되겠다는 막연한 준비보다는 각 직무에 대해 좀 더 구체적으로 알아보고 자신의 적성에 맞는 분야를 준비하시는 것이 더 좋겠죠. 그래서 오늘 영상은 웹디자이너를 처음 준비하시는 분들에게 도움이
깃허브 사용 방법 / 깃생성, 업로드, 수정파일 반영 [내부링크]
깃생성 / 업로드 참고포스팅 : https://2hyes.tistory.com/91 1. 초기설정 (로그인) $ git config --global user.name "designup" $ git config --global user.email "[email protected]" 2. .git 파일 생성 $ git init 3. 선택한 프로젝트 폴더 내의 **모든** 파일 버전 관리 (만약, 특정파일만 하고 싶다면 git add a.py 형식으로 써도 무방하다.) $ git add . 4. 버전 관리 확인 tracking. 업그레이드 된 것은 untracking이라고 빨간 글씨로 뜸 $ git status 5. 커밋 $ git commit -m "파일에 표시할 주석(날짜, 버전 등)" 6. 레포지터리 주소 입력 $ git remote add origin https://github.com/designup/cssjs_togglemenu.git 7. github에 push(업로드) /
웹디자이너로 전직(이직)을 희망하시는 분들에게 올립니다. [내부링크]
가끔 저에게 "웹디자이너로 이직을 해도 될까요?" 라는 질문이 들어옵니다. 아주 민감함 질문이죠. 이직이라는 것은 인생이 걸린 문제인데... 또 각자의 능력과 처한 상황이 다르기 때문에 답변을 드리기가 매우 곤란합니다. 그래도 이런 이직에 관련된 질문에 대해 제 나름대로의 생각이 있어서 오늘 영상을 통해 정리를 해보려 합니다. 참고로 이 영상이 구독자님들이 어떤 길을 가야 하는지 선택을 해주지는 않을 것입니다. 이 문제는 본인이 가장 잘 알고 있고 어떤 선택이든 본인이 스스로 해야 합니다. 하지만 이미 머릿속에는 분명 생각이 있지만 그 생각들이 얽히고설켜서 너무 복잡한 상태라 선택이 힘들고 그래서 누군가에게 의지하고 싶은 것이겠고, 그래서 저에게 질문을 한 것이라 생각합니다. 저도 그 선택이 두렵다는 것을 잘 알고 있습니다. 그래서 오늘 영상에서는 구독자님의 선택에 도움이 되도록 그 복잡한 생각들을 정리할 수 있는 시간을 만들어보겠습니다. 그럼 현명한 선택을 하시기 바라며 오늘 영상
웹디자이너로 전직(이직)을 결정하신 분들에게 올립니다. [내부링크]
이전 영상에서 돈이 필요하거나 나이가 많은 경우에는 웹디자이너로 이직을 하면 안 된다고 말씀을 드렸는데요. https://blog.naver.com/designup80/222730673538 웹디자이너로 전직(이직)을 희망하시는 분들에게 올립니다. 가끔 저에게 "웹디자이너로 이직을 해도 될까요?" 라는 질문이 들어옵니다. 아주 민감함 질문이... blog.naver.com 오늘 영상에서는 그래도 난 꼭 웹디자이너를 하고 싶다는 분들에게 제 생각을 추가로 말씀드리려 합니다. 그럼 영상 시작하겠습니다. 웹디자이너로 이직 시 준비물 먼저 도전에 필요한 준비물부터 말씀드리겠습니다. 일단 기본적으로 도전의 불꽃을 활활 태우는 노력, 이 노력은 당연한 거죠~ 그리고 그 불꽃을 계속 유지하는 끈기도 당연히 필요합니다. 이 노력과 끈기는 웹디자인의 길을 선택하시든 아니면 다른 길을 선택하시든 어떤 길을 선택하시든 간에 당연히 기본적으로 필요할 것이고요. 여기에 추가로 우리는 지금 남들보다 많은 늦
[직업 선택] '지식'이 필요한 직업과 '지혜'가 필요한 직업 [내부링크]
직업을 선택하시거나 혹은 전직은 준비하는 분들은 두 가지를 고려해 보세요. 첫 번째는 이 직업이 실력을 많이 필요로 하는지 아니면 운을 많이 필요로 하는지 두 번째는 지식이 많이 필요한지 아니면 지혜가 많이 필요한지도 생각을 해봐야겠습니다. 이런 생각을 통해 이 직업이 어떤지, 어떻게 준비해야 하고, 어떻게 일을 하게 될 것이고, 미래나 전망이 어떨지 대충은 예상하실 수 있을 것입니다. 오늘 영상에서는 그중 두 번째인, 지식과 지혜에 대해 이야기를 해보겠습니다. 첫 번째 실력과 운에 대한 영상은 하단 영상 설명에 링크를 남겨두었으니 아직 안 보신 분들은 먼저 보시는 것을 추천드립니다. ↓↓↓ [직업 선택] '실력'이 필요한 직업과 '운'이 필요한 직업 직업을 선택하시거나 혹은 전직은 준비하는 분들은 두가지를 고려해보세요. 첫 번째는 이 직업이 실력을 많... blog.naver.com 그럼 오늘 영상 시작하겠습니다. 지식과 지혜의 차이 모든 직업에는 공부를 통해 얻는 '지식'과 경험
[직업 선택] '실력'이 필요한 직업과 '운'이 필요한 직업 [내부링크]
직업을 선택하시거나 혹은 전직은 준비하는 분들은 두가지를 고려해보세요. 첫 번째는 이 직업이 실력을 많이 필요로 하는지 아니면 운을 많이 필요로 하는지 두 번째는 지식이 많이 필요한지 아니면 지혜가 많이 필요한지도 생각을 해봐야겠습니다. 이런 생각을 통해 이 직업이 어떤지, 어떻게 준비해야 하고, 어떻게 일을 하게 될 것이고, 미래나 전망이 어떨지 대충은 예상하실 수 있을 것입니다. 오늘 영상에서는 그 중 첫 번째인, 실력과 운에 대해 이야기를 해보겠습니다. 01 운이 많이 필요한 분야일 수록 잘나가는 사람보다는 못나가는 사람들을 보고 배우세요. 모든 직업에는 실력과 운이 모두 필요합니다. 하지만 분명 실력이 많이 작용하는 분야가 있고 반대로 실력보다는 운이 많이 작용하는 분야가 있습니다. 쉽게 말해 노력한 만큼 성과가 나오는 분야가 있고 노력은 별로 안 했는데 쉽게 성과를 낼 수 있는 분야가 있다는 것이죠. 자 그럼 예를 한번 들어볼까요? 만약에 '자동차 영업에 도전하고 싶다!'
초보 웹디자이너분들은 이미지 빨, 텍스트 빨의 효과를 이용해 보세요. [내부링크]
디자인의 조건, 목적성과 심미성 일반인들이 생각하는 디자이너는 이쁘고 멋진 결과물을 만드는 사람이라 생각하는 것이 일반적이고 디자인이란 이쁘게 만드는 것을 디자인이라 생각합니다. 하지만 우리 디자이너들이 생각하는 디자인은 다르죠. 우리가 만드는 결과물의 조건에는 단순히 이쁘게 만드는 심미성 뿐만 아니라 보는 이들에게 우리의 생각과 의도를 효과적으로 전달하는 목적성이라는 조건도 있습니다. 따라서 우리 웹디자이너들은 심미성과 목적성이라는 두 마리 토끼를 잡아야 하는데요 오늘 포스팅에서는 컬러 사용이나 레이아웃이 힘든 초보 디자이너 분들에게 이 두 마리 토끼를 한 번에 쉽게 잡는 방법에 대해 이야기해 보겠습니다. 색을 어떻게 하면 잘 쓸까? 어떻게 나누고 어떻게 배치하는 게 이쁠까? 색 쓰는 법, 배치하는 법, 많이 힘드시죠? 아마도 대~부분의 초보 웹디자이너분들은 비율을 잡는데, 레이아웃을 구성하는데 많이 고생하실 것입니다. 특히 색을 잘 쓰는 건 정말 어려운 일이죠. 그렇다고 공부를
[CSS 선택자] 속성의 특정 값 (문자열) 으로 태그를 선택하는 방법 [내부링크]
문법 선택자[속성^=값] 속성 안의 값이 특정 값으로 시작하는 태그를 선택 선택자[속성*=값] 속성 안의 값이 특정 값을 포함하는 태그 선택 선택자[속성&=값] 속성 안의 값이 특정 값으로 끝나는 태그를 선택 예제 공부 출처 : https://88240.tistory.com/362 #css #선택자 #css선택자 #문자열 #웹퍼블리싱 #지식
목적성과 심미성으로 바라본 '웹디자인 요소' [내부링크]
본 포스팅에서는 텍스트, 이미지, 컬러, 레이아웃을 목적성과 심미성으로 바라보며 점수를 매겨봤습니다. 해당 점수는 제가 근무하는 업무환경에서 나온 지극히 주관적인 생각으로 작성되었으니 이점 참고하시기 바랍니다. 01 텍스트 (총점 : 8점) 목적성 : (5점) 텍스트는 그 자체가 정보가 될 수 있기 때문에 이성을 통해 아주 효과적으로 우리의 의도와 목적을 알려줄 수 있습니다. 또한 우리의 생각을 폰트의 모양을 통해 감성적으로 전달할 수도 있습니다. 심미성 : (3점) 텍스트의 활용에 따라 점, 선, 면과 같은 조형 요소의 역할을 할 수가 있고 다양한 폰트의 모양을 통해 디자인 결과물의 심미성을 충족시켜줄 수 있습니다. 이렇게 텍스트는 그 자체만으로도 디자인의 조건 (합목적성, 심미성, 경제성, 독창성 등) 을 모두 충적할 수 있기 때문에 타이포그래피로 완성될 수 있습니다. 02 이미지, 그래픽 (총점 : 9점) 목적성 : (4점) 우리의 의도나 목적을 디테일하게 표현하기는 힘들
조형 요소, 조형 원리 그리고 색 이론까지 잘 정리한 블로그를 소개합니다. [내부링크]
디자인 공부를 하며 얻는 '디자인 지식'과 '디자인 방법' 우리가 디자인 공부를 할 때 책이나 강의 영상 통해 접하는 정보는 크게 두 가지 성격이 있습니다. What (지식) 디자인이 무엇인지, 폰트란 무엇인지, 포토샵 레이어는 무엇인지 등과 같이 어떠한 정의를 내려주는 '지식' How (방법) 좋은 디자인을 하려면 어떻게 해야 하는지, 롱쉐도우 텍스트는 어떻게 만드는지, 두 이미지를 혼합하려면 어떻게 해야 하는지 등과 같이 어떻게 하는지를 알려주는 '방법' 우리가 공부를 하면 이렇게 두 종류의 정보를 얻는데요, 지식 공부, 방법 공부 둘 다 필요하다는 것은 길게 설명하지 않아도 충분히 아실 것입니다. 하지만 지식 공부는 좀 피곤하죠... 하기 싫죠... 책 서너 장만 읽어도 잠이 쏟아집니다. 그래서 많은 분들이 지식 공부에 집중하기보다는 어떻게 하는지에 대한 방법 공부를 통해 직접 실습을 하면서 부수적으로 지식도 같이 배워갈 것입니다. 포토샵을 처음 배울 때를 예로 들어보면 포토샵
디자인 시스템에 대해 알아봅시다. [내부링크]
디자인 시스템이란? 웹이나 각종 서비스 UI 디자인에서 재사용 가능한 컴포넌트와 패턴을 정의하여, 전체 디자인에 일관성 있게 적용할 수 있도록 만든 가이드라인이나 규칙을 말한다. 미리 만들어 놓은 컴포넌트를 재사용함으로써, 좀 더 효율적으로 디자인할 수 있다. 같은 요소를 다시 만드는 수고를 덜어주기 때문에, 의도하지 않은 비일관성을 줄일 수 있다. (출처 : 위키피디아) 디자인 시스템은 불필요한 디자인들의 중복성을 줄이면서 다양한 페이지와 채널에서 시각적인 일관성과 제품에서 공유되는 철학이나 언어들을 대규모로 관리하기 위한 일련의 기준을 말한다. (닐슨 노만 그룹) 디자인 시스템은 팀이 다양한 디지털 제품에 걸쳐 일관된 사용자 경험을 생성하기 위해 사용하는 원칙, 표준을 기록하며 재사용 가능한 디자인 요수(구성 요소 및 패턴)의 모음입니다. 디자인 시스템은 팀이 디지털 제품 및 개발을 할 때 사용되는 안내서입니다. (어도비) 디자인 시스템을 적용해야 하는 이유 (장점) 1. 디자인
checkbox, radio 와 label 을 묶어주는 두가지 방법 [내부링크]
1. id와 for 값으로 묶어주기 <input type="checkbox" id="age"> <label for="age">나이</label> 2. label 태그로 감싸주기 <label><input type="checkbox">나이</label> 라디오 태그도 마찬가지임 1. id와 for 값으로 묶어주기 <input TYPE='radio' id='r1' name='group1' value='apple' /> <label for='r1'>사과</label> <input TYPE='radio' id='r2' name='group1' value='lemon' checked='checked' /> <label for='r2'>레몬</label> 2. label 태그로 감싸주기 <label><input TYPE='radio' name='group1' value='apple' />사과</label> <label><input TYPE='radio' name='group1' value='le
네이버 검색 API 사용 방법 (JSON) [내부링크]
1. 애플리케이션 등록 https://developers.naver.com/apps/#/register 2. 애플리케이션 정보에서 " Client ID " 와 " Client Secret " 복사 (메모) 3. 예제 복사 후 " Client ID " 와 " Client Secret " 적용하기 https://developers.naver.com/docs/serviceapi/search/blog/blog.md#%EB%B8%94%EB%A1%9C%EA%B7%B8 4. JSON 출력 값 확인 후 활용하기 #api #네이버검색api #애플리케이션 #네이버api #웹퍼블리싱 #방법
폰트의 3속성 - 가독성, 판독성, 심미성 [내부링크]
가독성 판독성 심미성 읽기 좋은 글자 술술 읽혀 나가는 글자 찰나의 순간에 각 글자의 판독이 쉬운 글자 완벽하게 읽히는 글자 모양 보기 좋은 글자 멋진 글자, 이쁜 글자 사용자들은 우리가 디자인한 모든 글자를 읽지 않죠. 대부분 그냥 쓱~ 보고 넘어갑니다. 사용자들에게 뇌를 활용해서 읽게 시키는 건 매우 힘든 일입니다. 그래서 우리는 보는 글자와 읽는 글자를 구분해서 접근해야 할 것입니다. 보는 글자 최초 사용자들은 글자를 읽지 않고, 그냥 쓱~ 보고 넘어갑니다. 따라서 찰나의 순간에 사로잡아야 합니다. 이때는 심미성이 가장 중요하고, 목적에 따라 판독성도 필요할 것입니다. 보는 글자에서는 일단 가독성은 그냥 무시합시다. 눈누 - https://noonnu.cc/ 읽는 글자 보는 글자로 흥미를 끌었다면, 사용자들은 우리가 준비한 글자를 읽을 것입니다. 이때는 가독성과 판독성이 매우 중요합니다. 심미성을 강조한 폰트는 사용자들의 읽는 행위를 방해하기 때문에 읽는 글자에서는 일단 심미성
rem은 html 속성에 정의된 font-size 값의 영향을 받는다. [내부링크]
em은 부모 속성에 정의된 값의 영향을 받지만 rem은 html 속성에 정의된 font-size 값의 영향을 받는다. 따라서 웹사이트의 폰트 크기, 가로세로 크기 등의 모든 단위를 rem으로 설정한다면, html 에 정의 된 font-size 값 하나를 변경함으로써 웹사이트의 전체 크기를 바꿀 수가 있게 된다. #rem #em #css #웹퍼블리싱 #폰트크기
유튜브 공유 퍼가기 소스를 반응형 코드로 바꾸세요. [내부링크]
커뮤니티 사이트나 홈페이지 게시판에 유튜브 동영상 공유 소스를 넣으면 PC에서는 잘 보이지만 스마트폰에서는 잘려서 보이는 경우가 있습니다. 이는 유튜브 동영상 공유 소스가 반응형 지원이 되지 않기 때문인데요, 비메오 동영상 공유 소스 비메오의 경우에는 아래와 같이 Responsive라는 기능이 있어 반응형 코드로 자동 변환 해줍니다. 이렇게 비메오는 이 문제를 아주 쉽게 해결 할 수가 있죠. 하지만... 유튜브 동영상 공유 소스 유튜브의 경우에는 아래와 같이 Responsive라는 기능이 없습니다!! 참 골치 아프지만... 그래도 해결해야겠죠? 유튜브 반응형 공유 코드 <div style="position: relative; height:0; padding-bottom: 56.25%;"> <iframe width="560" height="315" src="https://www.youtube.com/embed/kMlS1OutCSs" frameborder="0" allow="accele
반응형 비율을 유지해주는 css 신기능, aspect-ratio [내부링크]
하... 이렇게 좋은 기능이 있는 줄 이제 알았습니다. 반응형 박스 만들려고 DIV를 만들고 패딩 값을 주고 절대값으로 높이를 지정하고... 이제 그럴 필요가 없을 것 같습니다. 많은 분들이 이 기능을 통해 구원받기를 바라는 마음으로 포스팅을 통해 공유합니다. DIV 뿐만 아니라 이미지, 테이블 등 모든 태그가 가능 img, input[type="image"], video, embed, iframe, marquee, object, table 이렇게 다양한 태그가 가능합니다. 간단한 사용 방법 div { aspect-ratio: 16 / 9; width: 500px; background: #cccccc;} 이렇게 aspect-ratio: 16 / 9 한줄만 넣으면 16:9 비율의 div가 만들어집니다. 역시나...익스플로러는 지원 안됨 #css #웹퍼블리싱 #반응형박스 #반응형 #aspect-ratio
[CSS 색상] HSL의 속성을 변수로 만들어 활용하기 [내부링크]
HSL HSL은 아래 색을 표현하는 색상, 채도, 명도의 앞글자들입니다. Hue 색상 0 ~ 360 사이 숫자 (= 색깔 방향 의미 숫자) (숫자만 기재) 0 (= 360)은 빨간색, 120은 녹색, 240은 파란색 Saturation 채도 0 ~ 100 % (% 단위 필수) Lightness 명도 0 ~ 100 % (% 단위 필수) 0%는 검은색, 50 %는 보통, 100%는 흰색 HSL 문법 hsl (100, 100%, 50%) /* #5f0 */ hsl (235, 100%, 50%, .5) /* #0015ff with 50% opacity */ hsl (235 100% 50%); /* CSS Colors 4 space-separated values */ 활용 예제 <style> :root{ --hue:204; --saturation: 100%; --lightness : 30%; } .card {width: 300px; height: 300px; color: azure; bac
[다크모드 디자인] 순수한 검정색 NO! 순수한 흰색 NO!! [내부링크]
눈을 편안하기 위해 탄생한 다크모드가 오히려 눈을 불편하게 할 수 있습니다. 검은색 배경에 흰색 텍스트를 읽으면, 홍채가 조금 더 열리고 수정체가 변형되면서 눈의 초점이 흐려집니다. 이런 현상은 "fuzzing effect" 또는 "Halation"으로 알려져 있습니다. 건강하지 않은 다크모드는 너무 높은 대비로 몇 분 사용하지 않아도 눈에 해를 줄 수 있습니다. 1. 순수한 검정색 바탕은 안됩니다. 완전한 검정색(#000000)을 사용하는 것보다 짙은 회색을 바탕색으로 사용하는 것이 더 안전합니다. 높은 대비를 주면 보기에 피로할 수 있습니다. 짙은 회색 바탕 위의 얇은 글자는 검정바탕 위의 글자보다 덜 대비되어 눈의 피로를 줄여줍니다. 검정 바탕에서는 글자 그림자 효과 (깊이감)을 줄 수 없습니다. 짙은 회색 배경은 더 다양한 컬러, 엘레베이션(높낮이), 깊이를 표현할 수 있습니다. 검정 바탕에서는 검정 버턴의 활성화 효과를 줄 수 없습니다. 머터리얼 디자인은 다크테마의 배경으로
[다크모드 디자인] 채도가 높은 컬러는 사용하지 마세요. [내부링크]
다크테마에서 채도가 높은 컬러는 사용하지 마세요. - 어두운 배경에 쨍한 느낌의 컬러는 눈에 부담을 줍니다. - 반대로 채도가 낮은 컬러는 가독성을 높이고 시각적 혼동을 줄입니다. 다크테마에선 가독성이 좋은 밝은 톤의 컬러(200-50 범위 내)를 사용하세요. 작은 변화가 UI의 표현력을 떨어뜨리지 않고 눈의 피로 없이 적절한 대비를 유지하도록 도와줄 것입니다. #다크모드 #다크테마 #폰트색상 #웹디자인 #지식지혜
[다크모드 디자인] 깊이감은 '밝기'로 표현할 수 있습니다. [내부링크]
높이가 높을수록, 컬러는 밝아집니다. 라이트테마에서는 그림자로 깊이를 표현하며, 높이가 높아질 수고록 그림자는 더 커집니다. 하지만 다크테마에서는 그림자로 깊이감을 표현하기에는 다소 제약이 있습니다. 따라서 밝기로 깊이를 표현하는 것이 좋습니다. 높이가 높을수록, 컬러는 밝아집니다. 머티리얼로 제작된 다크테마에서는 높이를 가진 면과 요소들이 오버레이 되어 색이 지정됩니다. 고도가 높을수록 그 면은 더 밝아지게 됩니다. #다크모드 #다크테마 #높이 #깊이감 #웹디자인 #지식지혜
영역별 섹션 구분만 확실히 해도, 반 이상은 먹고 들어갑니다. [내부링크]
0 1 먼저 초보 디자이너분들은 단순한 배치로 진행하세요. 이런 것으로 하세요. - 영역별 구분이 확실한 웹페이지 초보 웹디자이너분들은 아래와 같이 영역별 구분이 확실한 디자인으로 진행하시는 것이 좋습니다. 쉬운 것부터 차근차근 쌓아가며 자신감을 가져봅시다! 영역별 구분이 확실한 웹페이지 이런 건 하지 말아요. - 영역별 구분이 불명확한 웹페이지 아래와 같이 영역별 구분이 난해한 배치는 가능한 피하시는 것이 좋습니다. 이건 학원에서 배운 지식이나 계산으로 하는 것이 아닙니다. 경험을 통한 디자인 감에 의존해야 할 것이기 때문에 매우 어렵습니다. 영역별 구분이 불확실한 웹페이지 집에서 연습하는 건 아무래도 상관없지만, 실무에서 괜히 어설프게 따라 했다가... 자신감만 떨어집니다. 0 2 강 약 강 약, 섹션 구분만 확실히 해주세요. 강약 강약으로 진행되는 페이지의 리듬감~ 상단 히어로 이미지는 강한 인상을 심어주도록 강하게 힘을 주고, 그다음 섹션은 약하게, 그다음 섹션은 강하게
조형요소와 조형원리 그리고 공부 자료들 모음 [내부링크]
조형요소 조형원리 작품을 제작할 때 필요한 기본적인 구성요소 조형요소들이 유기적으로 잘 연계되어 작품을 구성하도록 하는 것 조형요소들이 결합하면서 나타나는 효과 점 선 면 형(형태) 명암 색 질감 공간감 율동 비례 균형 대비 대칭 강조 반복 동세 조화 공부 자료 조형요소와 조형원리에 대하여(점,선,면,형,명암,색,질감,공간감,율동,비례,균형,대비,대칭,강조,반복,동세) https://mini-news.tistory.com/94 [기초 미술수업] 조형요소와 원리 이해하기! https://youtu.be/ZH39jYEMQIQ 그래픽 디자인 시작하기: 기본요소 https://youtu.be/YqQx75OPRa0 본 포스팅에 대해 궁금하신 점이 있으신 분들은 댓글이나 네이버 톡톡으로 질문주시면 솔직하게 답변드리겠습니다.
디자인에서 조형요소의 역할과 시각적 기능 [내부링크]
레이아웃을 잘 꾸미고 디자인을 잘 설계하는 주 목적은 우리가 준비한 정보 (콘텐츠)를 사용자들에게 잘 전달하는데 있습니다. 이번 포스팅에서는 조형 요소들을 심미성이 아닌 목적성으로 바라 보며 정리를 해보겠습니다. 레이아웃의 구성 요소 그림 글자 여백 색상 조형요소의 역할과 시각적 기능 조형요소 기능 느낌 점 강조(점, 포인트), 분할(문단 단락을 점으로 구분), 그룹(목차) 주목시키는 느낌 선 강조(밑줄, 지시선 등), 분할(선으로 구분), 그룹(목차 세로선, 박스) 주목, 방향성(지시) 면 강조(마커), 분할(배경색), 그룹(박스) 공간, 여백, 넓은 면적 강조 색 입체감표현, 강조 공부 출처
[UX디자인] 선택지(옵션)는 가능한 5개 이하로 줄이자. - 힉스 법칙 [내부링크]
힉-하이먼 법칙 (힉스 법칙, 힉의 법칙) 힉 하이먼의 법칙은 선택지가 늘어나면 개인이 결정하는 데도 시간이 늘어난다고 말합니다. 유저 경험의 각 단계에서 선택지를 제한하여 방문객의 주의가 웹에서 다른 곳에 쏠리지 않도록 하는 것이 중요합니다. 긴 메뉴 옵션보다 하나의 콜 투 액션 버튼이 훨씬 더 효과적이라는 것입니다. 무조건 줄이는 것이 상책은 아닙니다. 역으로 사이트 내의 체류시간을 올려주어 SEO 측면에서 긍정적(?) 효과를 기대할 수도 있고, 누군가에게는 눈 앞에 펼쳐진 많은 옵션들이 오히려 직관적이다는 느낌을 줄수도 있습니다. 하지만 응답(반응) 시간이 중요한 경우 선택할 옵션 수를 줄이는 것이 좋겠죠? 이때 1:5는 경험적으로 좋은 방법이 될 수 있습니다. 1개의 기능에서는 옵션의 수는 5개 이하로 맞추는 것입니다. 더 깊이 공부하신 분들을 위한 참고 공부 자료 https://www.shutterstock.com/ko/blog/how-to-design-a-website/
[UI 디자인] 버튼별 계층 구조에 따른 디자인 예시 [내부링크]
주 버튼 : 자주 누르는 버튼, 눌러야 하는 버튼은 고대비 배경색으로 작업 부버 튼 : 일반적인 버튼, 버튼임만 알려주면 됨, 테두리나 대비가 낮은 배경색으로 작업 기타 버튼 : 있어야 하지만 잘 안 쓰는 버튼, 존재는 하지만 안 써도 되는 버튼으로 간단하게 텍스트 혹은 밑줄로 작업 비활성화 버튼(안 눌러지는 버튼) : 비활성화 버튼은 보통 회색으로 많이 하는데, 회색으로 하지 말고, 디자인 투명도를 내려서 작업하는 것도 좋은 효과가 있음 반드시 위 규칙대로 작업을 하는 것이 아니라 위 규칙처럼 계층 가이드를 정하고 작업을 하는 것이 중요
[UI 디자인] 요소 간 구분을 줄 때, 여백을 활용하는 것도 좋다. [내부링크]
UI 디자인 작업시 요소 간 구분을 줄 때, 보통 선으로 구분을 주는 경우가 많다. 이때는 여백을 활용하는 것도 심미적으로 효과적을 수 있다. 1. 테두리, 선 사용 아주 효과적이지만 너무 많이 사용하면 자칫 답답해 보일 수 있다. 2. 배경색을 다르게 사용 (면 분할 효과) 3. 여백으로도 구분할 수 있음 다만 일관성 있는 간격 가이드를 준비해야 함 4. 그밖에 박스 쉐도우도 있음 (그림자 길이, 넓이 등에 따라 계층 가능, 따라서 통일된 가이드 필요)
유튜브 소개 <Shantanu Kumar>, 디자이너의 삶이란 이런 것이다. [내부링크]
오늘은 인도 델리에서 프리랜서로 활동하는 샨타누님의 채널을 공유하겠습니다. 이번 채널은 작업 팁이나 노하우와 같은 정보를 얻기보다는 디자인에 도움이 되는 긍정적인 영감을 얻을 수 있는 디자이너의 일상을 담은 VLOG 성격의 채널입니다. 본 채널을 학생이나 준비생이 보실 경우에는 우리의 현실과 다른 디자이너의 환상이 생길 수도 있을 것 같습니다. 이점 주의하시기 바라며, 또한 현직 디자이너분들이 보실 경우에는 내 현실과 다른 이질감으로 부러움 및 좌절감을 맛보실 수도 있습니다. 채널 소개 구독자 수는 22만명, 총 영상수는 30개가 안됩니다. 약 2년 전에 개설된 채널로 영상 업로드는 한 달에 1개 정도 올라오는 것으로 보입니다. 업로드가 자주 되는 채널이 아니므로 구독이나 알림 설정을 해두셔도 크게 귀찮게는 안 할 것으로 예상이 됩니다. 업로드된 모든 콘텐츠는 성격이 비슷합니다. 디자이너의 일상을 담은 VLOG 형식의 콘텐츠로 영상 초반에는 샨타누님이 커피를 마시거나 관광을 하는 등
가독성이 낮은 폰트가 오히려 집중력과 암기력을 도리어 높인다. [내부링크]
가독성이 낮은 폰트가 오히려 집중력과 암기력을 도리어 높인다. https://noonnu.cc/ (눈누) 미국 UCLA 경영 대학원 대니 오펜하이머 교수팀은 18~40세의 28명을 대상으로 서체의 가독성과 암기력의 관계에 대한 시험을 한 결과, 가독성이 높은 폰트로 작성한 목록으로 암기한 경우 정답률이 70%가 조금 넘는 비율에 불과했지만, 가독성이 낮아 읽기 어려운 폰트를 본 경우 정답률이 86.2%에 달했다는 결과가 나왔습니다. 이런 연구결과는 뇌과학적으로도 증명되기도 합니다. 사람의 뇌를 기능성자기공명영상(fMRI) 장치로 촬영한 결과, 가독성이 높은 서체를 읽는 경우 문장을 연속적인 단어의 흐름으로 인식해 글자 수준에서 인지하지 않는 반면, 가독성이 낮은 서체를 읽는 경우 한 글자씩 뇌에서 처리하는 것으로 나타났습니다. 특히 가독성이 낮은 서체의 텍스트를 읽을 경우 집중력과 암기력이 발휘될 때 쓰이는 뇌 부위인 ‘후두정엽’이 활성화됐습니다. 가독성 높낮이에 따른 뇌파 비교 -
타이포그라피 TIP - 한줄에 60자 정도, 줄바꿈은 문자보다 30% 크게, 중요한 글자는 빨강으로 하면 안됨 [내부링크]
공부 출처 : http://koreawebdesign.com/typography-for-webdesign/ 좋은 독서 경험을 원한다면 한 줄에 60자 정도 있어야한다. 출처 : Baymard Institute 텍스트의 가독성을 높이기 위해서는 각 줄에 적당한 양의 텍스트가 있어야 한다. 이 이미지는 매터리얼 디자인 가이드의 한 부분입니다. 휴대 기기의 경우에는 30~40자 / 인쇄 및 데스크탑에서는 60자 정도 사용하는게 좋습니다. 줄바꿈은 문자 높이 보다 약 30% 정도 높아야합니다. Dmitry Fadeyev 가 지적한 바로는 단락 사이에 공백을 적절히 사용하면 이해도가 20% 증가한다고 입증하였습니다. 빨강색만으로 중요표시를 하면 안됩니다. 적녹색맹은 가장 흔한 색맹입니다. 따라서 중요표시를 빨강으로 할 경우 인지를 못할 수 있습니다.
유튜브 소개 <존코바 디자인>, 당신의 디자인 밀도를 올려줄 채널입니다. [내부링크]
오늘 소개할 채널은 10년 차 모션그래픽 디자이너인 존코바님이 운영하시는 채널입니다. 제가 유튜브 프리미엄 구독을 결정하게 된 계기가 된 두 분이 계시는데요. 그중 한 분이 바로 존코바님입니다. 처음 우연히 유튜브 알고리즘 추천을 통해 존코바님의 10분짜리 영상을 봤습니다 . 그리고 느꼈습니다. 이제 도서관 갈 필요가 없겠구나... 진짜 그 순간이 제 인생의 전환점이 되었던 것 같습니다. 이미 제가 굳이 언급할 필요가 없을 정도로 유명한 분이지만 그래도 제 구독자분들 중에 저와 같이 모르셨던 분이 분명 있을 것이라 생각이 되어 이렇게 공유하려 합니다. 채널 소개 구독자 수는 약 24만 명, 총 영상수 130여 개가 됩니다. 그리고 업로드 주기도 매월 2~5개로 꾸준히 올라오고 있습니다. 재생목록들을 살펴보면 폰트, 컬러 등 디자인 요소들의 사용법에 대한 유용한 팁과 노하우를 담아 놓은 [디자인 팁] 목록과 구독자분들의 디자인을 컨펌 해주고 조언을 해주는 [디자인 참견러] 목록 등 7
[콘텐츠 디자인] 유튜브 썸네일은 문구(타이틀) 강조가 우선이고 가장 중요하다. [내부링크]
유튜브 썸네일의 작업 방향은 타이틀에 힘을 싫어주는 방향으로 진행한다. 1. 타이틀의 의미를 방해하는 요소는 과감히 차단한다. 2. 타이틀은 읽는 디자인이 아닌 보는 디자인으로 한눈에 볼수 있도록 작업한다. 3. 타이틀을 보는데 방해가 되는 배경이미지의 글자는 되도록 제거, 시선이 분산되는 복잡한 배경 제거 [before] [after] [공부 출처 : 존코바 유튜브 채널]
[UI 디자인] 콘텐츠 영역간의 여백은 꼭 필요합니다. [내부링크]
UI 디자인에서 콘텐츠 영역간의 여백은 꼭 필요합니다. 이번 포스팅에서는 여백의 중요성에 대한 예시를 보여드리겠습니다. 메인 비주얼 디자인입니다. 배경에 복잡한 이미지를 사용했지만 은은하게 처리하여 메인 카피의 가독성을 높여주었습니다. 여백도 적당하게 처리되어 시원함이 느껴집니다. 배너 또한 여백의 조화가 아주 시원합니다. 여백도 중요하지만 역시 디자인에서 고퀄사진은 엄청난 힘을 발휘하죠~ 좋습니다 좋아요~~ 여백 좌우에 톱밥 이미지를 넣어 다소 심심할 수 있는 부분에 포인트를 주었네요~ 좋습니다. 근데 말이죠~ 이렇게 하나하나 잘 만든 콘텐츠 영역들을 말이죠 하나로 합쳐보면 어떨까요? . . . . . 어휴... 너무 답답해보이죠... 하나하나 개별로 봤을때느 참 좋았는데 말이죠... 그래서 콘텐츠 섹션 사이에는 시원한 여백이 중요합니다. 아래는 콘텐츠 영역간에 여백을 넣어준 실제 결과물입니다. 휴~~~ 이제 좀 마음이 편해지네요 ^^;
웹디자이너 모니터 구입시 체크 사항을 정리해드립니다. [내부링크]
모니터 구입 시에 확인하셔야 할 조건들은 응답속도, 프레임, 명암비, 시야각, 색재현율, 해상도, 패널 등 여러 가지가 있어 아주 까다롭습니다. 하지만 이번 포스팅에서는 웹디자인 작업에 사용되는 모니터를 주제로 하기에 패널, 해상도, 색재현율 이렇게 3가지 조건으로 함축하여 설명드리겠습니다. 그리고 업무용이 아닌 개인 작업용 모니터로는 유튜브에 디자인용 모니터를 검색하셔서 나오는 모니터 리뷰 영상들을 참고하시는 것이 제 경험보다 더 좋기 때문에 본 영상에서는 해당 내용은 말씀드리지 않고 본 포스팅에서는 업무용 모니터로 어떤 것을 선택하면 좋을지에 대한 제 주관적인 기준으로 말씀드리겠습니다. 본론으로 들어가기 전에 본문 내용을 요약한 제 선택 기준을 먼저 말씀드리면 일단 TN 패널 모니터는 피하는 것이 좋고, 색재현율은 srgb 100% 도 충분하다고 생각합니다. 크기 및 해상도는 24인치, 1920 x 1080( FHD)의 모니터면 컨펌용으로 괜찮을 것 같습니다. 그럼 지금부터 웹디
이런 분들은 웹디자이너 하지 마세요. 웹디자인의 현실입니다. [내부링크]
웹디자이너는 기본적으로 디자인 감각이 있어야 한다 혹은 그림을 잘 그려야 한다 라고 생각하시는데요 저는 아무리 디자인 감각이 없더라도 혹은 그림을 초등학생 수준으로 그리신다 하더라도 본인의 노력으로 충분히 극복할 수 있다고 생각하고 충분히 도전해볼 만하다고 생각합니다. 하지만 지금부터 말씀드리는 경우의 분들은 본인의 진로에 대해 다시 한번 재고하시는 것을 추천드립니다. 지난 수년간 홈페이지 제작 업체에서 근무하며 접했던 신입 웹디자이너들과 웹디자인 회사에 취업한 학교 동창들을 보며 그리고 제가 직접 느낀 웹디자이너의 현실을 지금부터 말씀드립니다. 현재 웹디자인 취업을 준비하시는 분이 이 글을 보신다면 끝까지 한번 읽어보시는 것을 추천드립니다. 첫 번째. 일반 웹디자인 학원을 다니면 웹디자인을 할 수 있다고 믿으시는 분 웹디자인 취업을 준비하시는 분들이 가장 먼저 접하는 학원은 우리 주변에 있는 국비지원 학원 일 것입니다. 그리고 학원 측에서는 국민 내일 배움 카드를 통해 학원비가 최
웹디자인 실력을 키우는 원리를 정리했습니다. [내부링크]
머릿말 대부분의 웹디자이너님들은 신입시절 (입사 1년 차 시기) 에는 디자인 실력이 많이 성장합니다. 저도 신입 때를 생각하면 낯선 환경에 모두 생소하고 모든 업무가 하나하나 전부 어려운 작업들이었지만 이를 극복하면서 입사 1년 차 때가 가장 큰 성장했던 것 같습니다. 2년 차 때도 업무에 적응하며 1년 차 때보다 많은 일을 하면서 실력도 향상된 것 같은데요. 근데 정확히 언제부터인지 모르겠지만 내 디자인 실력이 정체되고 있다는 느낌을 받게 되었습니다. 혹시 여러분들도 본인의 디자인 실력이 정체되고 있다는 느낌을 받으신 적 없나요? 항상 쉬지 않고 더 많은 프로젝트도 진행하고 더 많은 경험을 쌓고 있는데 늘지 않는 내 디자인 실력... 은 무슨 이유일까요? 이번 포스팅에서는 디자인 실력이 향상된다는 것에 대해 생각해보려 합니다. 참고로 이번 포스팅은 심하게 주관적인 견해로 작성되었으니 보다 더 촘촘한 필터링이 필요할 것입니다. 1. 근육은 덤벨의 중량, 횟수를 올리면서 커집니다. 본
유튜브 채널 아트 제작 과정 안내 [내부링크]
이번 영상에서는 유튜브 채널 아트를 제작하는 과정을 실제로 보여드리도록 하겠습니다. 제가 개인 홈페이지를 만드는 영상에서도 말씀드렸듯 제 디자인 작업과정은 이렇게 진행됩니다. 1. 원고준비 2. 벤치마킹 3. 목적 디자인 4. 심미적 디자인 먼저 첫번째로 채널 아트에 들어갈 내용 즉, 원고를 준비하고 그 다음 원고 내용에 맞는 컨셉을 찾아 벤치마킹을 합니다. 다음 원고 내용에 맞는 의미있는 목적 디자인 작업을 하고 난 뒤에 비주얼 밀도를 올려줄, 심미적 디자인 작업을 진행합니다. 이 심미적 디자인은 크게 의미가 없어도 됩니다. 단지, 다소 심심한 디자인의 밀도를 올려주는 목적이기 때문에 그냥 이쁘게 만든다는 생각으로 진행하면 됩니다. 그럼 지금부터 원고 준비부터 디자인 작업까지 끊지 않고 진행하겠습니다. 1. 원고 준비 그럼 먼저 원고를 준비합니다. 저는 보통 원고를 작성할 때는 가장 가벼운 메모장을 많이 이용합니다. 하지만 때에 따라 워드를 이용하기도 하고 엑셀로 준비하기도 합니다
유튜브 채널 소개 <인생무기 디자인하기로>, 신입 디자이너분들께 추천합니다. [내부링크]
육아로 인해 도서관에 갈 수도 없고 심지어 책 서너 장도 읽기 힘든 저의 경우에는 자투리 시간에 틈틈이 스마트폰으로 보는 블로그 글이나 유튜브 영상이 유일한 공부 방법입니다. 이렇게 오직 자투리 시간만으로 자기 개발을 맡긴 지가 벌써 1년이 넘어가는 것 같은데요, 그래도 훌륭한 디자이너님들의 조언과 팁이 저에게는 많은 도움이 되고, 매우 값진 공부가 되고 있습니다. 물론 개인차는 있겠지만 분명 저와 비슷하게 도움이 될 것이라 생각이 되어 제가 지금까지 도움을 받았던 여러 채널들을 공유하고자 합니다. 오늘은 그 첫 번째 '인생무기 디자인하기로' 채널입니다. 채널 성격 현재 업로드된 영상은 총 10개뿐이지만 각 영상에서 하신 말씀이 제 가슴속 깊이 박혀 임팩트가 매우 컸던지라 이렇게 본 채널을 공유하고자 합니다. 포토샵 작업 팁, 디자인 공식 소개, 실무 작업 팁, 디자인 노하우, 심지어 아이맥 소개까지 다양한 성격의 영상들을 업로드하신 것으로 보아 디자이너들에게 유용한 영상은 모두 다
어도비 40% 할인 이벤트 주의 사항 (블랙프라이데이, 사이버먼데이) [내부링크]
웹디자이너라면 포토샵, 일러스트 등 어도비 프로그램을 무조건 쓰셔야 하는데요 아마도 이 어도비 구독료가 부담스러우신 분들이 꽤 많이 있을 것입니다. 이런 상황에서 어도비 블랙프라이데이, 사이버먼데이로 불리는 11월 40% 할인 이벤트는 가뭄에 단비와 같은 존재가 아닌가 생각됩니다. 하지만 이용약관을 잘 읽어보지 않고 덥석 계약을 진행하신 분들이라면 1년 뒤에 당황스러운 문제를 맞이할 수 있어 이를 한 번 더 알려드리고자 오늘 영상을 준비하였습니다. 1년 뒤엔 정상가로 자동 연장이 됩니다. 이벤트로 할인받는 기간은 1년만 가능하고 1년 뒤에는 정상가인 월 62,000원으로 자동 1년 계약이 됩니다. 이를 모르고 그냥 이용하시다가 뒤늦게 이를 발견하시고 후회하는 경우도 분명 있기 때문에 정상가 계약이 싫으신 분들은 최소 계약 만료 하루 전에 구독을 취소하셔야 합니다. 자동 연장 뒤에는 단 하루만 지나도 해지 위약금이 발생합니다. 최초 구독 계약은 14일 이내에 위약금 없이 환불이 가능하
[UI 디자인] 텍스트 계층 구분은 크기조절 보다 굵기,밝기 조절로 하자 [내부링크]
원문출처 실용적인 7가지 디자인 팁 http://koreawebdesign.com/practical-tip-7-for-designer-and-developer/ 10분 만에 더 나은 UI 디자인 만들기 https://brunch.co.kr/@gilberthan/32 - 크기 조절보다 굵기 조절이나 밝기 조절로 하라. - 굵기는 2단계, 밝기는 2~3단계 사용하기 - 통일감을 주기 위해 굵기(폰트 웨이트), 밝기(색)는 미리 가이드로 잡아두기 - 컬러 배경에서는 무채색 텍스트 사용 자제, 컬러톤에 맞는 텍스트 사용 (투명도 빼기) - UI 디자인 시 요소 간 구분을 줄 때 왼쪽은 4개 텍스트 사이즈, 오른쪽은 2개 텍스트 사이즈와 굵기, 밝기 활용 1. 메인 콘텐츠 - 굵고 진한 색 (#000 사용금지) 2. 서브 콘텐츠 - 진한 회색 3. 부가 정보 - 옅은 회색
디자인 판매 사이트 (크몽,오투잡,라우드소싱)의 가격경쟁과 디자인 가치의 하락 [내부링크]
10년 전 디자이너 모임 술자리에서 저가 홈페이지 제작업체가 디자인 시장에 미치는 영향에 대해 이야기를 한 적이 있는데 그때가 생각이 나네요.^^ 제대로 된 홈페이지를 만들려면 여러 분야의 고급인력들이 많은 시간을 할애하여 만들어야 하는데, 30만원 혹은 10만원 홈페이지라는 가격을 내세워 싸구려 홈페이지를 그냥 찍어내는 홈페이지 공장들 때문에 우리 디자이너의 능력 가치가 떨어진다. 이런 가격경쟁시장에서는 디자이너들이 퀄리티가 아닌 단가와 시간에 맞춰 작업을 진행하게 될 것이며, 이는 당연히 홈페이지 시장이 전반적으로 후퇴하게 되는 결과가 올 것이다.라는 이야기를 했었죠. 당시 그 자리에 모인 디자이너들 대부분이 이 주제에 대해 공감하고 있었으며, 심지어 저가 업체들을 심하게 욕하는 사람들도 있었습니다. 현재 크몽이나 오투잡과 같은 디자인 판매 사이트의 구성을 보면 디자인 퀄리티로 경쟁하는 방식이 아닌 가격으로 경쟁을 부추기는 구성으로 운영하고 있는 것을 확인할 수 있습니다. 10만
늦은나이에 국비지원학원에서 웹디자인을 배운후에 취업이 괜찮을까요? [내부링크]
30대 중반 여성입니다. 국비지원으로 웹디자인배운후에 취업이 어떨까 생각중인데 작은쇼핑몰 이런곳에 취업하고싶은데요, 괜찮을까요? 라는 질문을 제 개인 블로그를 통해 받았습니다. 이에 대한 답변을 질문자님에게 전달을 하였고, 혹시 이와 비슷한 고민을 하시는 분들과 답변을 공유하고자 이 영상을 준비하였습니다. 결론부터 말씀드리면 본인이 느끼시는 것처럼 늦은건 맞고 불리한건 맞습니다. 하지만 정말 디자인이 좋다면, 평생 디자인 공부할 자신이 있다면 그리고 기대 했던 것 보다 좋지 않은 환경, 급여, 대우, 복지 등 을 감당할 수 있다면 도전해볼만한 가치가 있는 분야라고 생각합니다. 그럼 아래 영상을 통해 제 생각을 말씀드리겠습니다. 참고로 절대 정답이 아닙니다. 그냥 제가 경험하고 느낀바를 말씀드리는 것이니 참고만 하시면 좋을 것 같습니다. (걱정 1) 학원 다니고 취업이 될까요? 다행히도 질문자님은 작은 쇼핑몰을 지원하신다고 말씀을 해주셨네요. 왜 다행이냐 하면, 와이프가 2개의 쇼핑몰
전단지, 벽보 광고 디자인은 촌스럽게 해도 됩니다. [내부링크]
오늘 포스팅의 핵심 결론부터 말씀드리겠습니다. 웹 사이트 디자인은 "깔끔하고 정갈하게" 하는 것이 굿디자인이라 할 수 있습니다. 하지만 전단지 디자인이나 벽보 광고 디자인은 "강렬하고 강력하게, 눈에 확 띄게, 복잡하고 정신 사납게" 해야 한다는 것이 굿디자인이라 할 수 있습니다. 이렇게 촌스러운 디자인이 왜? 굿디자인인지, 지금부터 말씀드리겠습니다. 전단지, 벽보 광고 디자인은 과하게 강하게 해야 합니다. 이번 포스팅에서는 주변에서 흔히 보는 전단지 및 벽보 광고 디자인에 대한 제 주관적인 생각을 말씀드리려 합니다. 그러니 참고만 하시면 좋을 것 같습니다. 사실 과거 학생 시절에는 전단지 디자인을 좀 무시했고 전단지 디자인을 만드는 분들은 실력이 없다고 생각을 했었습니다. 내가 전단지를 만들면 이렇게 촌스럽게 안 만들 거다 라고 생각했죠~ 쥐뿔도 모르는 학생 주제에 ㅎㅎㅎ 하긴 쥐뿔도 모르니까 그런 생각을 했었겠죠. 근데 저뿐만 아니라 대부분의 학생들이 그렇게 생각했을 것입니다.
UX와 UI, 그리고 웹디자인에 대해 말씀드립니다. [내부링크]
이번 포스팅에서는 UX와 UI가 무엇인지? 그 차이점에 대해 이야기 해보겠습니다. 이제 막 웹디자인을 시작하기 위해 학원을 알아보시는 분들은 UX UI 디자인과정을 접하게 될텐데요, UX와 UI가 무슨 차이점이 있는지, 또 UX디자이너는 누구이며, 무슨일을 하는지에 대해 말씀을 드리고 마지막으로 UX 디자인과 UI 디자인 중 하나에만 집중한다면 본인에게 어느 분야가 더 맞는지에 대해 제 주관적인 생각으로 말씀드리겠습니다. UI란 무엇인가? UI는 유저 인터페이스의 약자로 디스플레이 화면을 통해 사용자들과 기계가 서로 소통을 할 수 있게 해주는 서비스 화면을 말합니다. 쉽게 말해 우리가 스마트폰에서 흔히 사용하는 배달의 민족이나 티맵과 같은 앱 서비스 화면을 말합니다. 따라서 UI 디자인은 이 사용자 화면을 디자인하는 것입니다. 간단하죠? 그리고 유저 익스피어리언스 (UX), 번역하면 '사용자 경험'이라는 뜻을 가진 UX 디자인은 UI 디자인을 하면서 '사용자 경험'을 접목시켜 디자인
웹디자이너 모니터는 어떤 모니터를 쓸까요? 사무용 모니터? 디자인용 모니터? [내부링크]
세상에는 흔히 기본적으로 많이 사용하는 일반 사무용 모니터부터 백만원 이상에 달하는 고가의 모니터까지 수많은 모니터가 있습니다. 이번 포스팅에서는 웹디자이너 모니터로 무엇을 사용하면 좋은지에 대해 이야기 해볼까 합니다. 결론부터 말씀드리면 웹디자이너 모니터는 고가의 디자인용 모니터가 아닌 기본 24인치 사무용 모니터를 사용해야 한다라는 좀 엉뚱한 느낌의 결론인데요... 그럼 왜? 전문 디자이너가 왜?? 기본 24인치 사무용 모니터를 사용해야 하는지에 대한 엉뚱한 소리를 제 경험을 바탕으로 이야기를 해보겠습니다. 그리고 본 내용은 웹디자이너에게만 해당이 되며 종이로 결과물을 표현하는 인쇄디자이너분들에게는 전혀 해당 되지 않음을 말씀드리며 그럼 포스팅 시작하겠습니다. 디자인용 고가 모니터 좋습니다. 저도 좋다는거 알고 있습니다. 웹디자이너 모니터를 검색하시면 사무용 24인치 모니터가 아닌 색감도 좋고, 높은 해상도에 화면도 크고, 여러가지로 기본 모니터보다 훨씬 좋은 성능, 화질의 모니
매너리즘에 빠진 웹디자이너, 공부만이 해결책입니다. [내부링크]
이번 포스팅에서는 웹디자이너와 매너리즘에 대해 가볍게 이야기를 나눠 볼까합니다. 본 포스팅은 주관적인 견해로 해석한 내용이오니 본인은 어떤지, 본인의 생각을 가볍게 댓글을 달아 함께 소통을 해보는 것도 좋을 것 같습니다. 먼저 본론으로 들어가기 전에 매너리즘에 대한 정의를 간략히 말씀드리자면 매너리즘이란 '항상 틀에 박힌 일정한 방식이나 태도를 취함으로써 신선미와 독창성을 잃는 일' 을 말합니다. 아마도 매너리즘이 뭔지, 정확히는 잘 몰라도 '매너리즘에 빠진다' 라는 말을 한번쯤 들어보셧을 것입니다. 그리고 매너리즘이 슬럼프와 같이 부정적인 상태를 표현하는 말이라는 것 정도는 아실 것입니다. 이정도만 아셔서 본 포스팅을 이해하시는데에는 문제가 없을 것 같으니 매너리즘에 대한 자세한 설명은 생략하고 바로 포스팅 시작하겠습니다. " 매너리즘 " 항상 틀에 박힌 일정한 방식이나 태도를 취함으로써 신선미와 독창성을 잃는 일 웹디자이너에게 최대의 적, 매너리즘 저번 포스팅에서 경력과 실력은
윈도우 기본폰트(arial, Verdana, Georgia 등등), 과연 저작권 없는 무료폰트인가?? [내부링크]
디자인 작업을 할때 윈도우 기본폰트(arial, Verdana, Georgia 등등) 를 사용해도 되는건가?? 아무 생각없이 그냥 사용하곤 했는데... 그래도 되는건가?? 참 애매합니다. 그래서 찾아보니 아래와 같은 가이드를 확인할 수 있었습니다. 음... 더 애매해졌습니다. 그래서 쓰라는건지.. 말라는건지.. 근데 어느 한분이 이 내용을 이해하기 쉽게 해석을 해주셨는데요. 결론부터 말씀드리자면 HOME 버전 (개인사용자) 은 개인 작업용으로 사용이 가능하고, PRO 버전 (기업용) 은 상업용으로도 사용이 가능하다고 합니다. 쉽게 말게 윈도우를 PRO 버전으로 구입하셨다면 디자인 작업할 때 윈도우 폰트를 사용해도 된다는 것이죠~ 더 자세한 내용은 아래.......
단순한 포토샵 PSD파일 용량 클때 해결방법 [내부링크]
"단순한 PSD 용량이 너무 큽니다." "레이어 싹다지우고, 아무것도 없는 PSD파일이 수십메가예요" "이미지도 얼마없는데 PSD파일 용량이 너무 커요~" 이런 비정상적인 경험을 하시는 분들께 해결방법을 알려드립니다. 문제 원인 PSD에 이미지정보뿐만 아니라 메타데이터정보도 포함이 되어 있는데요~ 이것이 늘어나면 간단한 PSD파일도 용량이 아주 커집니다. 문제 해결 Exif Tag Remover 프로그램으로 PSD 메타데이터정보를 삭제하는 것입니다. 삭제 방법은 아래와 같습니다. Exif Tag Remover 다운받기 : http://www.rlvision.com/exif/about.asp 비정상적으로 용량이 큰 company_03.psd 파일 발견!!! 오른쪽 Exi.......
[문제해결] 포토샵 에러 - 예기치 않게 파일의 끝에 도달하였으므로... [내부링크]
예기치 않게 파일의 끝에 도달하였으므로 요청한 사항을 완료할 수 없습니다. 아주 잘~~~ 사용하던 포토샵이 어느날 나에게 이런 메세지를 보여주며...실행이 안된다... 재부팅을 해도 안되고... 실행조차 안되니 환경설정은 손도 못대고.... 정녕... 재설치만이 해결방법인가... 문제 해결!!! 포토샵 세팅값을 초기화 해주면 문제가 해결됩니다!!! 포토샵 세팅 초기화는 포토샵 실행시 Alt + Ctrl + shift 를 누른상태에서 아이콘 더블클릭을 하면 됩니다.
포토샵 초기화 실패시 안될 때 한번 보세요 [내부링크]
어느날 포토샵이 안열릴때 이상하게 포토샵이 뭔가 어색한데, 뭐가 잘못인지 모를때 포토샵 세팅을 만지다... 너무 많은 길을 오는 바람에 돌아가는 길을 못찾고, 처음으로 돌아가고 싶은때 이와 같은 여러가지 이유로 포토샵 초기화를 많이 하게 되는데요 포토샵 초기화는 아주 간단하게 키보드 좌측에 있는 alt + ctrl + shift 키를 동시에 누른 상태에서 포토샵을 실행시켜주는 것으로 초기화를 진행할 수 있습니다. 근데 말이죠~ 늘~~ 제가 잘 사용하던 포토샵 초기화가 어느날 안되더라구요~ (윈도우10으로 업그레이드 해서 그런가??) 보통은 '포토샵 세팅파일을 지우시겠습니까?' 라는 문구가 뜨면서 초기화가 진행이 되어야 하.......
웹디자인 벤치마킹시 주의할 점 [내부링크]
웹디자인을 잘 정리해놓은 수많은 디자인사이트가 있기때문에 보통 디자인작업에 앞서 잘된 디자인을 찾고 여러디자인을 벤치마킹하게 됩니다. 이때 의미없이 기획없이 그냥 이뻐보이는것을 찾고 비슷하게 작업을 진행하면, 좋은 결과물이 나올 확률이 아주 낮아집니다. 운이 좋아 좋은 결과물이 나올 수도 있긴 합니다. ^^; 하지만 좋은 결과물이 나올 확률을 높이기 위해서는 방법을 달리 해야 할 것입니다. 벤치마킹 대상물을 분해하고, 뜯어보자. (리버스 엔지니어링) 제작자가 무슨 생각으로 작업했는지 원고작성부터 어떤 생각으로 어떤 디자인 작업을 했는지 알아볼 수 있도록 분해하고 뜯어보자 어떤 디자인 스킬을 사용했는지 체크하자.......
AI 로봇이 디자인을 하는 것이 가능할까? 과연 디자이너들의 일자리를 빼앗을 수 있을까? [내부링크]
구글 AI가 이세돌 기사를 이기면서 여러 매체에서는 AI가 무엇인지, AI가 가져올 미래를 앞다투어 보도하고 동시에 일반인들에게도 AI가 알려지기 시작했다. 일반인들에게 가장 관심사는 아마도 AI가 인간들의 일자리를 뺏을 수 있는지에 대한 부분일 것이다. 이미 단순노동 부분에서는 로봇에게 일자리를 뺏긴지 오래이고, 최근에는 키오스크라는 무인안내 시스템이 아르바이트생들의 자리를 대신하고 있지만 이는 어느 정도 예상되어 왔던 부분이기 때문에 그리 놀라운 현상은 아니다. 하지만 디자인 부분은 어떻게 될까? 과연 디자이너들의 일자리를 AI가 빼앗을 수 있을까? 절대 불가능할 것 같던 디자인 영역이라 생각했었는데 여러 로고 메.......
어도비 디멘션 - 간단한 목업 디자인에 유용한 3D디자인 툴입니다. [내부링크]
어도비사에서 제공하는 그래픽툴은 포토샵, 일러스트, 인디자인 이외에도 수많은 툴이 있습니다. 디멘션 (Adobe Dimension) 은 3D그래픽을 만들어주는 크리에이티브 툴로 2017년도에 어도비 크리에이티브 클라우드 제품군의 본격적인 멤버가 됩니다. 현재 2020년도 까지 많은 발전와 업데이트가 있었지만 사실 타사의 유명한 3D그래픽 툴보다는 기능면에서 많이 뒤쳐저있긴 합니다. 하지만 기존의 포토샵, 일러스트에서 제공하던 3D편집 기능보다는 훨씬 뛰어나고 기존의 3D 그래픽 툴보다는 사용법이 아주 간단하기 때문에 생각보다 많은 분들이 디멘션 툴을 활용하고 있으며, 특히 간단한 목업디자인을 만드는데 아주 유용하고 사용되고 있습니.......
http → https 리다이렉트, 자바스크립트로 처리하는 방법 [내부링크]
보통 호스팅업체에서 보안인증서까지는 설치를 해줍니다. 하지만 http 에서 https 로 리다이렉트 되는 작업은 해주지 않고 사용자가 알아서 홈페이지 소스를 수정하라고 합니다. 아래는 자바스크립트를 이용한 리다이렉트 코드입니다. 이는 클라이언트단에서 처리하는 방식으로 좋은 방법이라 할수는 없습니다. 가능한 서버단 혹은 클라이언트단 이전에서 처리하는 것이 좋습니다. 참고로 보통의 리눅스 호스팅에서는 htaccess 파일을 아래와 같이 수정을 하면 됩니다. 추가 팁으로 윈도우 location 객체들을 보여드립니다. window.location.hostname; // => designup.kr window.location.href; // => http://designup.kr:8888/t.......
드림코딩 엘리님이 말하는 "시멘틱 마크업" 정리와 HTML 요소 참고서 [내부링크]
HTML 요소 참고서 https://developer.mozilla.org/ko/docs/Web/HTML/Element 시멘틱 마크업이란? div, section, article, h2 등 수많은 태그들을 문서 내용에 맞게 선택해서 사용하는 것을 시멘틱 마크업이라 합니다. 시멘틱 마크업을 해야 하는 이유? 1. SEO - 검색엔진 최적화에 유리 2. 웹접근성 - 시각장애인들도 웹을 편리하게 접할 수있도록 도와줌 3. 유지보수 - 정리된 마크업은 코드 식별이 용이함 시멘틱 마크업을 할때 애매한 태그 <article> vs <section> <section> : div 대신에 정보글을 묶어줄 때 사용 <article> : body안에서 자제척으로 독립적으로 보여줘도 문제가 없는 완성된 정보를 묶어줄 때 사용.......
한 번쯤 들어봤던 화면설계 & 프로토타이핑 툴 총정리 [내부링크]
시안의 종류 와이어프레임(Wireframe) : UI 중심의 화면 레이아웃 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형 https://yslab.kr/94
google 캘린더, Task, 구글 킵 등 인터넷 서비스를 윈도우 프로그램처럼 단독창으로 이용하는 방법 [내부링크]
google 캘린더, Task, 구글 킵 등 인터넷 서비스를 윈도우 프로그램처럼 단독창으로 이용하는 방법 01 02 03
[웹기획자 필수 툴] 웹 기획자를 위한 여러가지 서비스 및 관련 툴을 정리하였습니다. [내부링크]
세균무기님께서 올려주신 웹기획자 필수 툴 모음입니다. 몇가지 추천 툴 서비스를 올려주신 것이 아니라 쓸만한 툴은 모두 정리하여 올려주셨습니다. 서비스 기획자 뿐만 아니라 일반회사원, 학생들에게도 유용한 툴이 많이 있는 것 같으니 한번쯤 시간내시어 참고하시고 활용해보시는 것도 좋을 것 같습니다. germweapon.tistory.com/m/391
웹기획자 및 웹종사자들을 위한 웹디자인 실무용어 정리 영상입니다. [내부링크]
업무용어는 협업에 있어서 팀원들간에 소통에 꼭 요한 요소라 반드시 숙지하시는 것이 좋습니다. 물론 회사에 입사를 하면 선배님들이 잘 알려줄테고 업무를 하다보면 자연스럽게 익히겠지만, 센스있는 신입사원이 되고 싶다면 미리 숙지하는 것이 좋을 것입니다. 아래 영상은 IT 웹 실무에서 사용하는 웹디자인 실무용어 정리 영상입니다. 참고로 조직마다 조금씩 용어의 차이가 있을 수 있습니다. 따라서 영상마다 용어의 차이가 있기도 한데요, 틀리고 맞고의 문제가 아니므로 모두 알아두시면 좋을 것 입니다. 특히 와이어프레임과 스토리보드, 목업과 프로토타입의 경계가 업체마다 좀 다른 것 같은데요 바오밥나무님의 포스팅에 도움이 될.......
관리자의 두 이름, 리더와 매니저의 차이점 [내부링크]
출처 : https://ko1.living-in-belgium.com/difference-between-leader-and-manager-851 리더와 관리자는 조직의 목표를 달성하기 위해 기꺼이 일하도록 직원을 격려하고 격려하며 영향을 미치는 사람이라는 점에서 모든 조직에서 중요한 역할을 수행합니다. 반면에 관리자는 회사와 이해 관계자, 즉 직원, 고객, 공급 업체, 주주, 정부, 사회 등을 연결하는 중요한 연결 고리입니다. 그는 기본적인 관리 기능을 수행하는 사람입니다. 리더의 정의 리더는 특정 목표를 달성하기 위해 추종자에게 영향을 미치는 사람입니다. 그는 비전을 가진 사람이며 추종자들에게 비전이되는 방식으로 영감을줍니다. 그는 목표 달성을위한 전략을 세우는 데 도.......
마우스 우클릭, 드래그 복사가 안되는 경우에는 개발자 도구를 활용하세요. [내부링크]
인터넷에서 찾은 예제코드나 샘플코드를 복사하려고 하는데... 일부 웹사이트에서는 마우스 우클릭 혹은 드래그가 막혀있어 복사가 안되는 경우가 있습니다. 특히 네이버 블로그는 기본 설정으로 복사 방지가 되어 있더라구요.. 이때 아주 간단하게 복사를 할 수 있는 방법이 있습니다. 바로 개발자 도구의 옵션에서 자바스크립트 기능을 해제하는 방법입니다. 첫번째. F12 키를 눌러 개발자 도구를 실행한 뒤에 우측 상단의 톱니바퀴 모양을 눌러주세요. 두번째. 하단으로 스크롤을 내려서 "Disable Javascript" 를 체크해줍니다. 엣지의 경우에는 아래와 같이 한글로 나와있으니 참고해주세요~
HTML 및 CSS를 사용하여 단 10 분 만에 배경 비디오로 웹 사이트를 만드는 방법 [내부링크]
홈페이지 배경에 동영상을 깔아주는 소스 영상입니다. 영상을 제어해주는 버튼기능은 자바스크립트를 활용하여 구현됩니다. 자막지원이 안되긴 하지만 강사분이 인도분이신지 영어 발음이 딱딱해서 오히려 더 잘들리는 듯 합니다.^^; 나레이션을 이해 못하셔도 소스를 이해하는데는 별 무리는 없긴 합니다. 동영상은 유튜브 링크가 아닌 video 태그를 활용하여 들어가게 됩니다. 이번 영상의 핵심인 video 태그 활용소스는 7분 10초부터 시작되오니 급하신 분들은 여기부터 보셔도 될 것 같습니다. 그럼 즐공하세요~ https://www.youtube.com/watch?v=xekZXhumB0k
자바스크립트없이 css로 구현하는 오버레이 햄버거 메뉴입니다. [내부링크]
다들 햄버거메뉴를 구현하기 위해서는 자바스크립트 혹은 jQuery를 사용하실 겁니다. 이 영상에서는 체크박스의 checked를 감지하여 css로 햄버거 메뉴를 구현하였습니다. https://www.youtube.com/watch?v=DZg6UfS5zYg 추가로 영어가 불편하신 분들을 위한 유튜브 실시간 번역 방법 안내해드립니다. 아래 링크 참고해보세요~ https://designup3.tistory.com/pages/%ED%95%B4%EC%99%B8-%EC%9C%A0%ED%8A%9C%EB%B8%8C-%EC%98%81%EC%83%81-%EC%9E%90%EB%8F%99%EB%B2%88%EC%97%AD-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
일반인들도 코딩없이 앱,홈페이지 개발이 가능할까? 과연 개발자들의 일자리는 어떻게 될까? [내부링크]
디자인 AI에 포스팅에 이어서 이번에는 코딩 자동화 서비스에 관련 된 동영상을 소개 해드리려 합니다. 코딩없이 웹사이트를 구축하는 툴/서비스로는 이미 1997년도 드림위버나 나모웹에디터와 같은 툴이 있었습니다. 하지만 이 툴을 이용한다 하더라도 코딩 지식없이 제대로 된 사이트를 구축하는건 사실상 불가능했었죠. 이후 10년이 넘게 지난 지금의 2020년는 상황이 많이 달라졌습니다. 물론 아직까지는 내가 원하는 홈페이지나 앱을 코딩지식 없이 만든다는 건 불가능하지만 실사용이 가능한 수준의 결과물을 만드는 수준까지는 도달했으며, 이미 많은 사용자들이 이 서비스의 편리함을 누리고 있습니다. 대표적인 예로는 유튜브광고로 한.......
html과 css로 만드는 슬라이드 배너 강좌입니다. (No 자바스크립트) [내부링크]
#코드_슬라이더 이번 영상은 실무에서 활용하기에는 좀 무리가 있지만 html과 css 를 보다 깊게 공부하는데 도움이 될 것 같습니다. input의 radio속성을 활용하여 슬라이드를 선택적으로 보여지게 하였으며 슬라이드배너가 부드럽게 움직이는 효과는 css의 transition을 이용하였습니다. 그럼 아래 코남님의 재밌고 센스있는 강좌영상을 확인해보세요~ 참고로 보시면 아시겠지만 코남님의 강좌영상 센스가 구독버튼을 자연스럽게 누르게 할 것입니다. 사용된 예제파일은 아래 블로그 링크를 통해 이동하셔서 다운받으 실 수 있습니다. https://blog.naver.com/co-nam/222084570760
css 단위 em 과 rem 재미있게 정리 해드립니다. [내부링크]
2007년도 부터 이바닥에 들어서고 css 단위는 px, % 이 두가지로 퉁치면서 문제없이 잘쓰고 있었는데요, 어느날 반응형 홈페이지라는 말이 나오더니 그에 맞게 em, rem, vh, vw 등 여러가지 단위들이 늘어 났습니다. 세상이 변함에 따라 공부할 것이 계속 늘어나니 심심하지 않아 좋네요 ^^; 이중 em 과 rem에 대해 드림코딩 엘리님께서 재미있게 콘텐츠를 잘 만들어주셨습니다. em 과 rem가 헷갈리시는 분들은 참고해보세요~
타 사이트에서 자바스크립트 기능을 확인하고 활용하는 방법 (디버깅) [내부링크]
자바스크립트를 공부하시는 분들 및 이를 다루시는 모든 분들에게 아주 유용한 팁이 될 것 같아 소개해드립니다. 물론 크롬 개발자 도구는 워낙 유명한 기능이라 이미 알고 계신 분들도 많이 있지만 오늘 소개해 드릴 이 영상은 지금까지 접했던 여러 포스팅 여러 동영상 중 가장 이해하기 쉽게 알려주는 것 같아 오늘 제 블로그를 통해 이 영상을 소개해드립니다. 타 사이트에서 자바스크립트 기능을 확인하고 활용하는 방법 (디버깅) 사이트를 살펴보다 보면 이런 기능은 어떻게 구현했을까? 어떤 식으로 만들었을까? 자바스크립트 코드를 살펴보고 싶은 때가 많이 있죠? 나름대로 각자의 방법들이 있겠지만 이 영상에서는 크롬 개발자 도구를.......
독특한 스타일의 자바스크립트 유튜브 강좌 영상 추천 [내부링크]
제 강의는 좀 쉬울수가 있어요~ 왜냐면 전 빡대가리 레벨로 설명을 하기 때문에~ 이렇게 시작하는 유튜브 강의 채널입니다. ㅎㅎㅎ 참 독특합니다. 유튜브에는 수많은 강의와 강사들이 있습니다. 유명한 강사들도 있지만, 유명한 강사가 꼭 나에게 잘 맞는 건 아닙니다. 나를 잘 이해시키는 강사, 나와 잘 맞는 강사가 좋은 강사 아닌가요? 한번 참고해보세요~
디자인업 개인 홈페이지 제작 단계 및 과정 [내부링크]
이번 영상에는 제가 개인 홈페이지를 만드는 단계를 보여드리려 합니다. 오래전 만든 개인 홈페이지가 있긴 하지만 사실상 너무 오랜 기간 동안 그냥 방치하고 있었기 때문에 홈페이지 내용도 지금 현재와 많이 다르고 또 누군가에게 보여주기가 민망할 정도의 수준입니다. 이번에 홈페이지 만들어야 하는 작은 목적이 생겨서 이번 기회에 개인 홈페이지도 만들고 또 제가 홈페이지를 만드는 과정을 여러분들에게 보여드리려 합니다. 일반적인 홈페이지 제작 과정은 기획, 디자인, 개발 이런 순으로 진행이 되지만 그 속에 있는 작은 과정들은 제작 업체마다 또는 작업자마다 다르기 때문에 정확한 정답은 없습니다. 그리고 제가 보여드리는 과정.......
반응형 브레이크 포인드 (중단점)에 대한 고찰 [내부링크]
스마트폰 기기별 브라우저 해상도 (dp) 아이폰6 : 375 * 667 아이폰6 plus : 414 * 736 갤럭시 S5~7 : 360 * 640 갤럭시 S8 : 360 * 740 LG G6 : 360 * 720 스마트폰 세로모드에서는 모바일홈페이지, 가로모드에서는 태블릿홈페이지를 보여주려 한다. (네이버에서 그렇게 하니까 그냥 그게 좋은것 같다) 그러므로 스마트폰 브레이크포인트는 640px 미만으로 지정 (가로모드에서 크기가 가장 짧은 갤럭시S5~7 640dp를 기준으로 결정) ※ PSD 작업사이즈는 선명한 해상도를 고려하여, 360의 두배인 720px에서 작업 태블릿 기기별 브라우저 해상도 (dp) 아이패드 : 768 * 1024 넥서스/지패드 : 800 * 1280 / 600 * 960 갤럭시 Tab : 800 * 1280 / 76.......
나이가 많다고 비전공자라고 포기하거나 좌절하지 마세요. 충분히 극복할 수 있습니다. [내부링크]
"남들보다 나이가 많아서... 디자인 전공이 아니라서... 난 힘들 거야... 난 안될 거야... " 네 맞습니다. 맞는 말이긴 하지만 반은 맞고 반은 틀리다고 생각합니다. 남들보다 나이가 많다는 것은 분명 안 좋은 조건입니다. 그리고 디자인 전공자가 아니라는 것도 분명 남들보다 불리한 조건이 맞습니다. 달리기로 비유하자면 남들보다 100미터 뒤에서 출발하는 것과 마찬가지죠. 분명 안 좋은 것은 맞습니다. 그리고 이런 이유로 내가 원하는 일을 포기하는 분들도 분명 있을 것입니다. 힘든 건 맞습니다. 그리고 당연히 힘들어야죠. 앞에서 달리고 있는 사람들을 따라잡아야 하는데 당연히 그들보다 두배 세배는 힘들겠죠. 근데 불가.......
네이버 블로그
티스토리
커뮤니티