Coding/etc
-
(내가 보려고 만든) Web/App UI 용어 & Component 정리Coding/etc 2021. 4. 13. 17:43
🥲 계기 프론트엔드 개발자로 일하다보면 디자이너&퍼블리셔 뿐 아니라 개발 용어에 무지한 팀원들과도 소통을 해야 할 때가 많았다. 예를 들어 이번에 배포하면서 수정되는 UI나 주요 Feature에 대해 정리하여 전달해야 하는데, Header, Footer, Radio 등등 퍼블리싱 경험을 통해 얻은 용어를 무의식적으로 사용하다보면, 의사소통이 원활하게 느껴지지 않는다고 느꼈다. 이번 프로젝트에서 실제 발생한 대화를 극단적인 케이스로 각색해 공유해보겠다. 🧑🏻💻 개발자 : 이번에 요청주신 기획안 바탕으로 Header 영역을 개편하는데, 링크 버튼을 몇개로 줄이고 대신 메인 영역에 Primary Button을 추가하기로 했습니다. 🧑🏻🎨 디자이너 : 상단 메뉴바의 GNB 개수 수정하고, CTA를 메인으로 ..
-
웹사이트에서 Video 태그 Autoplay 이슈 해결하기Coding/etc 2021. 3. 30. 20:18
안녕하세요. 오늘은 웹사이트에 동영상을 띄우기 위해 Video 태그를 사용할 때 생길 수 있는 이슈에 대해 정리해보겠습니다. 🧐 동영상을 자연스럽게 렌더링하기 이번에 웹사이트에 동영상을 추가하기 위해 대중적으로 많이 사용하는 Video 태그를 사용하게 되었습니다. S3으로부터 비디오 파일을 받아온다음 렌더링해야하기 때문에 아무래도 로딩 시간이 너무 오래 걸리면 안된다는 점이 중요했습니다. 그러다보니 자연스레 4k 영상이라 용량이 매우 높았던 것을 압축해야 했습니다. 기본적으로 동영상이 용량이 이미지보다 훨씬 높을 수 밖에 없었기 때문에, 최대한 유저가 자연스럽게 동영상 로딩을 받아들일 수 있는 장치가 필요했죠. Video 태그에는 'poster' , 'autoplay'라는 attribute를 추가할 수 ..
-
[SEO] 네이버 서치 어드바이저에서 내 사이트 최적화 만점을 받아보자Coding/etc 2020. 11. 18. 17:28
안녕하세요. 오늘은 SEO 최적화를 위해 네이버에서 제공하는 네이버 서치어드바이저를 사용해보도록 하겠습니다. 🧐 SEO가 뭔가요 ? SEO(Search Engine Optimization)는 검색 엔진 최적화라는 뜻으로, 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말합니다. 검색 엔진 최적화가 잘 된 사이트일수록, 검색 엔진에 노출되는 빈도가 높아지겠죠. 보통 많이 사용하는 검색엔진인 구글, 네이버 모두 SEO를 위한 툴을 제공하는데 구글의 경우 Google Search Console(구글 웹마스터), 네이버의 경우 네이버 서치어드바이저라는 툴을 제공합니다. 한번 이 서치어드바이저라는 걸 사용해 볼까요? 🕹 내 사..
-
[개취존중] 데굴데굴 굴러가는 Progress bar를 만들어보자 🤩Coding/etc 2020. 8. 19. 17:22
안녕하세요 ! 이번 포스팅에서는 현재 제 블로그에서 사용하고 있는 이미지가 굴러가는 듯한 애니메이션의 Progress bar를 만든 방법을 공유합니다. 외부 라이브러리 조금과, 간단한 제이쿼리 기능만 사용하면 아주 쉽게 추가할 수 있습니다! 잠깐!😳 이번 포스팅은 다음을 전제로 합니다. 1. 데굴데굴 굴러갈 커여운 이미지가 준비되어 있다. - 스크롤에 따라 0~360도까지 회전하기 때문에 원형에 가까울 수록 좋습니다. 2. 페이지 소스에 제이쿼리가 적용되어 있다. - 저의 블로그에는 jQuery v3.3.1이 cdn으로 적용되어 있습니다. 3. June의 prognroll.js를 적용하는 포스팅(https://enfanthoon.tistory.com/156)을 보고왔다. 1. prognroll 붙이기 위..
-
[HTML/jQuery] 짧은 코드로 Progress bar / Scrollbar 커스터마이징하기Coding/etc 2020. 8. 2. 20:15
안녕하세요 이번 포스팅에서는 여러분들의 블로그를 간단하게 꾸미는 방법에 대해 소개합니다. 1. Progress bar Progress bar는 진행 상황을 나타냅니다. 보통은 div나 span으로 구현하기도 하지만, 간단하게 외부 라이브러리를 이용하는 것도 좋은 방법이겠습니다. 다음 코드를 HTML 파일에 추가해 봅시다. (티스토리의 경우 스킨 편집 -> HTML 편집에서 추가할 수 있습니다) 제이쿼리를 사용하여 prognroll을 HTML 요소에 붙이는 것을 볼 수 있습니다. 티스토리의 경우는 제이쿼리가 옛날버전으로 추가되어 있지만, 다른 플랫폼을 사용하시는 경우 제이쿼리 cdn까지 추가해 주어야 합니다. 이때 중요한 점은 Progress bar가 적용될 부분입니다. 다음 코드에서는 body에 붙이고 ..
-
2년차 개발 블로그의 애드센스 수입은 어느정도일까?Coding/etc 2020. 6. 9. 11:53
안녕하세요~ 오늘로써 제가 티스토리에 포스트를 업로드한지 대략 400일 정도가 되었습니다. 그동안 쉰 기간도 많고, 정말 하루에 2~3개씩 포스팅을 하며 불태운 기간도 있었는데요. 오늘 포스팅 주제는, 2년 차 개발 블로그의 애드센스 수입은 어느정도 나올 지에 대해 알아보도록 하겠습니다. 애드센스란 구글에서 제공하는 광고 프로그램인데요. https://www.google.com/adsense/new/u/0/pub-9382586972339738/home Google 애드센스 - 웹사이트에서 수익 창출하기 Google 애드센스의 웹사이트 수익 창출 기능을 사용하여 수익을 올려보세요. Google 애드센스에서 광고 크기를 자동으로 최적화하여 광고의 노출 및 클릭 가능성이 높아집니다. www.google.co...
-
[Tistory] 인라인 코드 테마 변경하기Coding/etc 2019. 11. 27. 17:26
티스토리 인라인 코드 테마 변경하기 안녕하세요😆 오늘은 티스토리의 스킨 편집에서 인라인 코드의 테마를 변경하는 법을 알아보겠습니다. 그 전에, 인라인 코드가 뭐냐구요? 사실 티스토리 글쓰기에서 기본 모드만 이용하신 분들은 인라인 코드가 뭔지 잘 모를 수 있습니다. 하지만, 마크다운이나 HTML 모드로 작성하면 코드블록과는 살짝 다른 것이 인라인 코드입니다. 우선은 마크다운 기준으로 설명을 해 보겠습니다. HTML 모드로 이용하시는 분들은 이미 인라인 코드의 차이를 아실테니 적용 단계부터 해보세요. 마크다운에서 코드블록을 입력하기 위해서는 ```와 ``` 사이에 코드를 입력하면 기존에 설정한 테마대로 코드블록이 생길 겁니다. 저 같은 경우 티스토리 국민 테마인 highlight.js에서 ir-black 스..
