지금 당장 알아야하는 아이콘 기본 개념

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ธ.ค. 2024

ความคิดเห็น • 87

  • @seosky123
    @seosky123 ปีที่แล้ว +127

    우와... 소수점이 나오면 안된다는 이유를 png jpg 로 추출해서 보여주시니까 직감적으로 확 이해가 됐어요! 왜 소수점을 없애야 하는지 제대로 이해했습니다!! 너무 감사합니다! 보는 내내 '우와...' 연발했습니다!

  • @Louisvuitton100
    @Louisvuitton100 ปีที่แล้ว +224

    디자인 년차는 꽤 되는데도... 매번 회사에서 쓰는 사이트들에서 리소스 받아다 쓰고 하던거만 해서 그런가 마디아님 채널 보다보면 자괴감 개오짐... 지금까지 뭐하고 살았나 싶기도하고... 또 요즘 신입급으로 포폴 평가 받으시는분들 보면 진짜 너무 잘하시더라고요... 년차만 쌓였지 다 부질없는 경력된거 같아서 항상 영상보면서 배웁니다... 근데 볼때마다 자괴감들어 우울해짐... 걍 그만둘까...흑

    • @goatkinggod
      @goatkinggod ปีที่แล้ว +32

      어느 분야던지 계속 공부하지 않으면 도태되는 것 같아요. ㅠ

    • @Louisvuitton100
      @Louisvuitton100 ปีที่แล้ว +5

      @@goatkinggod 맞아여 ㅠㅠ

    • @bacw5352
      @bacw5352 ปีที่แล้ว +4

      님 마음 이해가 가네요..

    • @관심은사양합니다
      @관심은사양합니다 ปีที่แล้ว +4

      제얘기로군요.... ㅠㅠㅠㅠ

    • @sheep178china
      @sheep178china ปีที่แล้ว +1

      부족한 점을 깨닫고 얼른 보완해야지가 아니라 포기하고 그만둘까라고 생각한다면 그만두시는게 맞습니다-ㅎ 성향 자체가 진취적이지 않기 때문에 나중에 언제 좌절해도 또 좌절하실 스타일입니다-

  • @WinTer7x
    @WinTer7x ปีที่แล้ว +35

    아이콘 픽셀 안 뭉개지게, 실무에서 기본중의 기본이죠.
    저기서 서로간의 크기, 볼륨감 등 밸런스까지 잡아주면 오케이!!!

    • @user-is628
      @user-is628 ปีที่แล้ว

      혹시 볼륨감 이라는게 어떤건지 알려주실수 있나요?

    • @ロロ-c2u
      @ロロ-c2u ปีที่แล้ว +1

      ​​@@user-is628 7:04 말씀하시는 것 같네요

  • @ldw0519
    @ldw0519 ปีที่แล้ว +34

    공격적으로 들릴 수 있는 부분에 하트 넣는 거 너무 웃겨요ㅋㅋㅋㅋㅋㅋㅋ

  • @jhkim8312
    @jhkim8312 ปีที่แล้ว +8

    큰 이미지를 잘 그리는거보다 작은 이미지를 제대로 그리는게 더 어려움
    회사에서 아이콘, UI, 캐릭터디자인 다 해봤지만 작은 아이콘이 진짜 어렵습니다
    큰걸 작게 줄여도 어떻게 줄이느냐에따라 깨지는 방식도 다 달라서 작은 이미지에서 느낌 차이가 어마어마합니다.
    그래서 작은 걸 기준으로 2배수로 놓고 작업한다음 정확이 1/2하죠.
    그리고 작아질수록 픽셀 단위이기때문에 픽셀에는 소수가 없습니다. 정수로만 작업해야함
    옛날에 도트 캐릭터 게임 생각하시면 될거같아요. 캐릭터를 그려서 줄이면 되는데 왜 도트를 굳이 찍을까요
    작은 이미지에서 정확하고 딱 떨어지는 색감과 형태를 잡아야 하기때문에 도트를 찍습니다.
    일러스트 캐릭터는 느낌으로 그리지만 도트 캐릭터는 찍을때마다 정확하게 왜 이렇게 찍는지 알고 찍어야 합니다.
    아이콘도 마찬가지죠.

  • @neederimasGG
    @neederimasGG ปีที่แล้ว +79

    개발자로 일하면서 ui디자이너 분들이랑 일할 때가 많은데, ui 결과물이 개발 단계에서 생길 수 있는 문제들을 정말 명쾌하게 알려주셔서 놀랍네요 :)
    저희 팀 ui 작업자 분들한테도 꼭 공유드리고 싶은 내용이에요

  • @chick_bean
    @chick_bean ปีที่แล้ว +55

    피드백 잘 봤습니다~! :)
    아이콘 디자인에서 가장 중요한 건, 가이드군요. 소수점이 아닌 정수로 규격을 맞춰야 한다는 거. 느낌이 아닌, 픽셀 맞춰서 그려야 하는거군요!

  • @suroogarlieara
    @suroogarlieara ปีที่แล้ว +8

    오왕… 저는 작지서 도식화 그리느라 일러 써서 전혀 몰랐는데 맨날 켜두고 그렸던 격자에 물리기가 이런 효과를 가져오는 군요.. 앞으로도 켜놓고ㅠ써야겠어요! 알고리즘 고맙다

  • @User_Noproblem
    @User_Noproblem ปีที่แล้ว +6

    ㅠㅠ역시 쉬운게 없네요 이렇게 항상 노력해주시는 분들 덕분에 제가 보기 좋은 아이콘을 보고 생활하는 거겠죠.. 😊 모두 화이팅 하세요 감사합니다.

  • @thedaybeforetommorow
    @thedaybeforetommorow ปีที่แล้ว +15

    못하겠으면 그리드 키고 스냅.. 꼭 쓰세요 여러분..

  • @구구콘-s5t
    @구구콘-s5t 9 หลายเดือนก่อน

    아무도 이렇게 자세히 알려주시는 분이 없었어요 ㅠㅠ 정말 참 스승… 감사합니다 마디아님… 마디아님 영상 다 보는 그 날까지 열심히 공부해야겠어요…

  • @HYUNYOUNGLIM-y5o
    @HYUNYOUNGLIM-y5o ปีที่แล้ว +5

    호우 확실히 끊어 말해주시니까 쌩초보부터 시작하는 저도 포인트를 알 것 같아요..! 조금씩 더 배워갑니다!

  • @HotdogYumyum
    @HotdogYumyum ปีที่แล้ว +8

    일러스트라고 맨날 무지성으로 그렸었는데
    내보낼 때는 png라 픽셀 신경써야 하는구나

  • @lso9393
    @lso9393 ปีที่แล้ว +6

    크으 완전꿀팁이네용! 실제로 내보내서 보여주니까 이해가 쏙쏙되고 좋아요! 늘 많은 도움받습니다 🥰🥰

  • @jinnylee6108
    @jinnylee6108 ปีที่แล้ว +2

    피드백 너무 재미있어요ㅎㅎㅎ 눈으로 보는게 제일 쉬워~♡

  • @youlya7
    @youlya7 ปีที่แล้ว +2

    아이콘 사이즈 기준없이 만들면 모아놓고 봤을때 분명 불편할텐데.. 개발자가 이정도로 느낄정도면.. 그렇다고 디자이너에게 수정요청하기에도 애매해서 문제

  • @wok1214
    @wok1214 ปีที่แล้ว

    와 처음 영상보는데 놀랐네요 깨닫는게 많네요!
    신입인 저에게 너무 도움 되는 영상입니다 ㅎ

  • @softk
    @softk ปีที่แล้ว

    아... 누가 이런거 지적 안해주나 했는데 정말 좋은 영상이네요.
    아이콘 드로잉의 기본상식을 잘 배우고 가는 것 같습니다. 감사합니다.

  • @큐라레
    @큐라레 ปีที่แล้ว +4

    개발자의 속이 뻥 뚫리네요 ㅋㅋㅋㅋㅋ 전 개발자인데도 Figma 에서 일일이 아이콘 픽셀 단위로 맞춘 기억이 나네요... 이게 어렵나..? 하면서... SVG로 하더라도 브라우저에 표시되는 경우 모니터 픽셀 밀도에 따라 위치나 깨짐 정도의 차이가 있는데 이걸 모르는 경우가 많더라고요...

  • @seosky123
    @seosky123 11 หลายเดือนก่อน +3

    UI 디자인을 하면서 질문이 생겨서 질문드립니다! 아이콘 선굵기를 1배수에서 1px로 하게 되면 어쩔수 없이 위치값에서 소수점을 사용하게 될 수 밖에 없더라구요.(1픽셀를 채우기 위해 0.5에 위치시키게 되기에) 그래서 질문을 드립니다! 2배수로 주로 디자인을 하게 되는 이유가 아이콘 또한 2px로 선 굵기를 주게되면 위치값도 딱 떨어지게 할 수 있는거랑 연관이 있는지 질문드려요!

  • @jinjeonghae
    @jinjeonghae ปีที่แล้ว +6

    프..리.. 픽….

    • @mansickim7358
      @mansickim7358 ปีที่แล้ว +1

      ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ마디아님 오열 ㅠㅠ

  • @차니차니-u6f
    @차니차니-u6f ปีที่แล้ว +1

    멋지다 멋져~
    실력도 상당하시고 설명도 잘 해주시고
    최고❤

  • @aloha_h
    @aloha_h 5 หลายเดือนก่อน

    저도 생각없이 그냥 그렸는데 감사합니다

  • @saeueo
    @saeueo ปีที่แล้ว +1

    자막에 💗하트 붙는게 넘 웃겨여ㅋㅋㅋㅋ

  • @gofront
    @gofront ปีที่แล้ว +5

    하… 우리팀 디자이너분한테 영상링크 전달하고싶다…

  • @hyungtaekim5661
    @hyungtaekim5661 ปีที่แล้ว

    안녕하세요. 저는 컴퓨터 그래픽에 문외한 인데 재미있네요. 그런데 한개의 아이콘을 만들고 어떻게 저장하는지 그리고 모음을 만들고 어떻게 저장하고 사용하는지 관리적인 것도 올려주시면 도움이 많이 될 것 같습니다.

  • @whatshappenn
    @whatshappenn 6 หลายเดือนก่อน

    마디아님 아이콘 그리실때 항상 가이드 박스를 그리고 하시잖아요 그 박스 크기를 그리는 기준이 있을까요?? 가이드를 잡기가 어려워서요ㅠㅠ

  • @WANNADOFUNTHINGS
    @WANNADOFUNTHINGS ปีที่แล้ว +1

    6년차 디자이너인데 아무리 처음이라지만 음.. 저걸 굳이 스트로크를 써야하나 싶기도하고..

  • @eze_you
    @eze_you 11 หลายเดือนก่อน

    마디아님 대학생입니다 포트폴리오용 앱디자인하고 있는데요. 포폴용 작업도 이런 디테일 필요할까요 어떻게 생각하시나요!

    • @UXUIDesign
      @UXUIDesign  11 หลายเดือนก่อน

      디자인에 사실 포폴용이고 아니고는 크게 나뉘지 않지만.. 시간적 여유가 없다면 유도리 있게 작업하시면 될 것 같습니다.
      다만 습관은 무서운 것이기 때문에 작업은 대충하는 것보단 어느정도 디테일을 잡아주시면 좋을 것 같네요~

  • @Theory_of_Relativity
    @Theory_of_Relativity ปีที่แล้ว

    내가 할 수도 있는 실수가 있을까 싶어 봤더니 가장 기본적인 부분에 대한 지적이었네요

  • @Lunatday
    @Lunatday ปีที่แล้ว +1

    아마도 네이버정도면 다들 배우신 분일거라 디자인 과정에서의 실수는 아닐거고 제 컴 문제일텐데 네이버 프로그램만 키면 딱 아이콘이 저런식으로 깨지더라고요. 아마 디스플레이가 뭔가 아다리가 안 맞는 거겠죠...? 네이버는 아이콘을 벡터가 아니라 png로 쓰는건지, 아니면 벡터인데 뭔가 오류가 있어서 깨지는지는 모르겠는데 참...

  • @AionX-zi9wo
    @AionX-zi9wo ปีที่แล้ว

    같은 것을 알려줘도...
    선으로 생각하는 분들과
    점선으로 생각하는 분들과
    화살표로 생각하는 분들이 공존한다.

  • @user-rb5uh4wesdf
    @user-rb5uh4wesdf ปีที่แล้ว

    피드백 오졌다... 잘봤습니다

  • @아장-c1b
    @아장-c1b ปีที่แล้ว

    디자이너가 해야할일
    1. 로고
    2. 각종 편집디자인
    3. 상페
    4. 웹 ui
    5. 앱 ui
    6. 가끔 ux
    7. 재수없으면 시스템
    8. 퍼블리싱
    솔직히 디자인만하다
    퍼블리싱쪽만 가도 공부가 끝도없는데 ㄹㅇ.. 아이콘까지 만들면 난 살고싶지않다 ㅋㅋ

    • @blueseeds828
      @blueseeds828 ปีที่แล้ว

      다하는데 죽을맛이네여😂

  • @조히-i5t
    @조히-i5t ปีที่แล้ว +6

    ㅋㅋ아이콘이 이렇게 손이 많이 가는거구나ㅜㅜ

  • @user_leeka
    @user_leeka ปีที่แล้ว +1

    가끔 작업할때 벡터를 jpg로 변환하는데, 왜 깨짐현상이 생기나 했더니....이런게 문제가 되는 거였군요...모닝 깨달음...!

  • @오랭디
    @오랭디 หลายเดือนก่อน

    감사요

  • @lhy6710
    @lhy6710 ปีที่แล้ว

    오늘 피드백도 좋다는거야~♡

  • @user-kf4ug9mb1i
    @user-kf4ug9mb1i ปีที่แล้ว +3

    나중에 기존 스타일과 반대로 큰 이미지가 퉁퉁 들어가는게 아닌 텍스트가 많이 들어가는 페이지 같은거 제작해 주시면 좋겠습니다ㅜ
    내용이나 정보가 많을때 레이아웃이나 간격 같은걸 어떻게 짜야하는지 보고 싶어서요..

  • @ejy184
    @ejy184 ปีที่แล้ว

    제대로 그리는 아이콘 근데 이제 정수를 곁들인

  • @한결-t4w
    @한결-t4w ปีที่แล้ว

    저도 알아듣게 설명해주시다니.. 이거 진짜 지리는데 어휘력이 조져서 이딴 표현밖에 안되네요..

  • @inkless533
    @inkless533 ปีที่แล้ว

    소수점이 아무래도 픽셀 기준이라 그런가보군요 신기하네

  • @cccc-g8r
    @cccc-g8r ปีที่แล้ว

    전공자는 아니지만 재밌네요ㅋㅋ

  • @sanana1518
    @sanana1518 ปีที่แล้ว

    짱이다..

  • @missujy
    @missujy ปีที่แล้ว

    아놔 쌤 사랑해여

  • @chamdomkyo
    @chamdomkyo ปีที่แล้ว +5

    하트 아이콘이나 쇼핑카트 아이콘 등은 그릴땐 정수여도 모양을 확장시키면 소수점이 나오는데 확장시킨다음에 다시 정수로 맞춰주면 되는건가요? 가이드에 안 닿을때가 종종 있어서 질문남겨봅니다

    • @UXUIDesign
      @UXUIDesign  ปีที่แล้ว +4

      아이콘이 정수로 그려졌다면 라인을 안쪽으로 넣으세용!
      그럼 익스펜드 하셔도 그대로 일겁니당~!

    • @chamdomkyo
      @chamdomkyo ปีที่แล้ว

      @@UXUIDesign 확장 후 모양을 합치면 소수점이 되는데 정수로 맞춰야할까요?

    • @귀여운아라찌
      @귀여운아라찌 ปีที่แล้ว

      소수점 넣지말라는건 어차피 프론트 개발자한테 줘봤자 소수점 단위까지 못 맞춰줘서 그런것도 있어요 디자인적인 관점에선 모르겠지만 개발자 입장에서 소수점 덩어리로주면 딱 맞춰지지도 않는데 디자인이랑 맞춰달라해해서 골때릴때 많아요

  • @ezo245
    @ezo245 ปีที่แล้ว +2

    이런 기초 모르는 사람들이 너무 많음

  • @SIMPSO_
    @SIMPSO_ ปีที่แล้ว

    와 이런차이가

  • @amirbloomsauce1969
    @amirbloomsauce1969 ปีที่แล้ว +2

    요즘엔 디스플레이, 프로세서 성능이 좋기때문에 이렇게까지 안해도 됩니다 ㅎㅎ

  • @Winter_zero_00
    @Winter_zero_00 ปีที่แล้ว

    외 스바 개쩐다…

  • @seosky123
    @seosky123 ปีที่แล้ว +2

    질문있습니다! 그러면 아이콘 같은 경우는, 일러스트레이터 보다는 XD를 이용해서 디자인 하는게 더 간편할 수 있는건가요? 픽셀로 딱딱 스냅을 해주니까 그런면에서 깨지지 않게 될 것같은데...

    • @pehg4712
      @pehg4712 ปีที่แล้ว +6

      일러스트레이터에도 상단 보기메뉴에 픽셀스냅기능이 있어요. 그리고 이걸 실제로 쓰는 지는 모르겠는데, 윈도우 단축키도 ctrl+alt+Y 누르면 픽셀 미리보기 기능도 있더라구요.

  • @minimin__
    @minimin__ ปีที่แล้ว

    걈사합니다!!!!

  • @AnneSong-d8u
    @AnneSong-d8u ปีที่แล้ว

    아이콘 응근 귀칞음 ㅜㅋ근데은근공부도좀해야함

  • @Sabuzark92
    @Sabuzark92 ปีที่แล้ว +2

    이런거 학원에서도 안알랴줌

  • @hey__you
    @hey__you ปีที่แล้ว

    배워야겠다

  • @kana816
    @kana816 ปีที่แล้ว

  • @jeunages
    @jeunages ปีที่แล้ว +12

    영상 잘 봤습니다. 그런데.....
    같은 문장을 세번 네번씩 반복하시는 습관은, 듣는 입장에서 굉장히 지치네요....

  • @한성현-r3v
    @한성현-r3v ปีที่แล้ว +6

    앱을 개발하면서 많은 아이콘을 쓰지만 아이콘을 제작할때 이정도로 신경써야하는지 몰랐네요
    근데 알려주시는건 감사하지만 억양과 반말을 섞어쓰는게 조금 안좋네요... 물론 개인적인 의견이긴 하지만 말투를 바꿔주시면 감사하겠습니다

    • @UXUIDesign
      @UXUIDesign  ปีที่แล้ว +1

      불편을 드려서 죄송합니다.
      저도 하다 보니 열정에 불타서.. 지인들 알려주듯 과감하고 편하게 컨펌을 해서 반말 등이 나온 것 같습니다.
      조언 감사합니당! 파이팅!!
      개인적인 의견이 항상 도움이 되는 말이 많더라고요.
      앞으로도 잘 부탁드립니당
      ..앞서 몇 개 녹화 더 한 게 있는데 그거까지만 봐주세용..

    • @Bean-Bug
      @Bean-Bug ปีที่แล้ว +3

      형, 나는괜찮아. 너무 좋아.

    • @Bean-Bug
      @Bean-Bug ปีที่แล้ว +6

      뭐는 감사하지만 이런건 거슬리니 바꿔달라, 이딴것좀 안해주셨으면 좋겠습니다. 무료급식소에서 예쁘고 맛있게좀 만들라고 진상부리는것같네

    • @한성현-r3v
      @한성현-r3v ปีที่แล้ว

      @@Bean-Bug 알려주신거에 감사드리는건 진심 입니다. 어디까지나 저의 의견을 말씀드리고 요청을 드린거 뿐이지 진상을 부렸다고 생각되지는 않습니다. 그래도 저의 글이 불쾌하셨다면 사과드리겠습니다. 죄송합니다.

    • @Bean-Bug
      @Bean-Bug ปีที่แล้ว +1

      @@한성현-r3v 제 언행도 다소 예민하고 과격했네요. 그점 사과드립니다.

  • @ponix1004
    @ponix1004 ปีที่แล้ว +2

    이정도 강박도 없으면서 그래픽 작업을 하는분들이 있구나...

  • @김치찌개-v9t
    @김치찌개-v9t ปีที่แล้ว