반응형 전체 글14 콘텐츠디자인 - 왜 배송안내를 안 읽을까? 쇼핑몰을 운영하는 분들 대부분이 네이버 스마트 스토어로 시작하는 분들이 많은 것 같습니다. 제가 최근에는 쇼핑몰 일을 하지 않은지 오래되어 디자인 트렌드를 잘 모르고 있었는데, 최근에는 예전처럼 통 이미지로 상세 이미지를 제작하기보다 사진 따로 글 따로 분리해서 만드는 경향이 있는 것 같습니다. 저도 오래전부터 SEO 측면에서 유리하다는 점을 강조하며, 같이 일하는 사람들에게 늘 이 부분을 적극 강조해왔기에 이런 변화가 바람직하다고 생각하고는 있습니다만, 이러다보니 디자인에 통일성이 없고 일관성이 떨어지는 경우들도 종종 보이는 것 같습니다. 하지만 심미적인 부분은 차치하고, 뭔가 저비용 창업으로 인해 디자이너 없이 운영 하는 곳들이 많아졌고, 직접 디자인 하다보니 아주 기본적인 부분에서 눈에 걸리는 것들.. 2022. 8. 11. 헤드리스 커머스(Headless Commerce) ,헤드리스 CMS 새로운 커머스 트렌드, 헤드리스 커머스 많은 브랜드들이 쇼핑몰을 구축하기 위해서 카페24, 메이크샵, 고도몰, 쇼피파이와 같은 쇼핑몰 솔루션을 이용하고 있어요. 솔루션을 기반으로 하기 때문에 쉽고 빠르게 쇼핑몰을 만들 수 ... www.i-boss.co.kr 아이보스에서 Headless Commerce라는 개념을 들고와서 소개하는 글을 보았는데, 사람들이 생각보다 관심을 많이 갖고 있는 것 같습니다. 표현이 거창해서 그렇지 백엔드와 프론트엔드를 왜 분리하는지에 대해 생각해보면 쉽습니다. 예전에는 그냥 서버에서 HTML 문서를 만들어서 뿌리는 방식으로 서비스해도 무리가 없었지만, 이제는 핸드폰으로도 봐야되고, 스마트 워치, 인공지능 스피커 등 다양한 디바이스를 통해서 서버의 자원을 끌어다 써야합니다. 메세.. 2022. 8. 9. Next.js 삽질 후기 - Toast UI Editor, TipTap, Quill 에디터 실패기 웹퍼블리싱만 하던 놈이 개발을 해보겠다고 호기롭게 덤빈 것이 후회되는 상황이 많이 발생하고 있는데, 그 중에 제일 장벽이 크게 느껴지는게 텍스트 에디터를 삽입하려다 실패한 것들입니다. Next.js는 SSR이 장점인 동시에, SSR때문에 초래되는 문제들이 있습니다. 리액트는 보통 CSR을 기본으로 돌아가고 있다보니 텍스트 에디터들이 굳이 SSR을 지원할 이유도 없고, 그러다보니 Next.js에 쉽게 붙이기가 어렵습니다. Dynamic import는 물론이고 이미지 업로드 기능이라도 붙여볼라치면 아주 지저분해지기 쉽상이죠. 이미지를 붙이는 가장 쉬웠던 방법은 Cloudinary 플러그인입니다. How to Serve Videos in Next.js Web Apps With Cloudinary Learn h.. 2022. 8. 3. Hover, Active, Focus, Disabled 상태에 따른 CSS 버튼 디자인 보통 CSS 프레임워크들을 사용할 경우 버튼에 대한 상태를 다양하게 준비하고 있어서 별도로 만들 필요가 없는 경우가 많습니다. 하지만, 직접 버튼을 만듦으로써, 각 상태에 따라 어떤 애니메이션이나 기능적인 부분들을 재현할 수 있는지 볼 수 있다는 점이 학습에 도움이 되기때문에, 한 번쯤 만들어보는 것이 좋다고 생각합니다. 최근엔 모바일에서 사용이 많아진 관계로 버튼은 기본적으로 화면상에서 최소한 7mm x 7mm - 이건 조사하는 곳마다 다른데 10mm x 10mm을 기준 잡는 곳도 있고 천차만별 - 크기를 차지해야한다고 하는데, 이 크기를 px로 변환하면 대략 44px 정도의 크기를 권장합니다. 버튼 높이가 대략적으로 44px 이상이면 터치하는데 큰 무리가 없다는 이야기죠. 버튼을 디자인 할때 단순하게.. 2022. 8. 2. react + tailwindcss 로 만든 샘플사이트 지난번과 똑같은 디자인인데, 이번엔 리액트 + 테일윈드CSS로 만들어봤습니다. 확실히 리액트로 만들면 반복되는 작업들을 줄여줄 수 있다는 점이 가장 큰 장점인 것 같습니다. 섹션을 표현할때도 아래와 같은 상황이 생길 수 있습니다. 공통적인 부분이 많이 사용되는데요. 어느정도 규칙성이 있죠? 조금 더 세부적으로 보면 아래와 같은 예시를 볼 수 있습니다. 반복 되는 요소들이 보이시죠? 이런식으로 스타일을 정의해놓고 Testimonial과 Our Services 그리고 그 안에 필요한 내용들만 데이터로 전달해주면, 껍데기는 알아서 씌워주는 식으로 작동하게끔 해줍니다. 이렇게 컴포넌트 단위로 쪼개서 작업한다는 것이 리액트의 장점입니다. UI를 재활용할 수 있는 단위로 만드는 것이죠. 위의 카드 스타일도 마찬가지.. 2022. 8. 1. 이 나라에서 가난한 건 죄에요 유튜브에서 돈 버는 콘텐츠와 관련된 영상들을 몇개 봐서 그런지 이런 광고가 뜨기 시작했다. 졸지에 가난한 사람들이 정신병자라고 주장하며, 자기 이야기를 헛소리라 취급하는 어리석은 사람이 되지말란다. 요즘 유튜브를 보면 정말 돈 버는 법에 대한 콘텐츠가 넘쳐난다. 이렇게 하면 월수입 500만원! 이걸로 억대연봉을 찍고 났더니! 여러분도 애드포스트 수익 올릴 수 있습니다! 수익회 블로그라는 말을 들어본 사람들이라면 이런 자극적인 제목들을 여럿 봤을 것이다 그런데 다소 웃겼던게, 나보다 방문자 수도 적고, 수익도 적은 애들도 저런 콘텐츠를 만들어서 올린다는것이다. 여기서 드는 의구심. 정말 돈 되는 일이라면 거기 매진해야지 그걸 왜 누군가에게 굳이 저런 약을 쳐가면서 가르치겠다고 나서는걸까? 그냥 박애정신이 .. 2022. 3. 21. 이전 1 2 3 다음 반응형
