본문 바로가기

IT 블로그28

[번역] UX라이팅의 16가지 규칙 원문 16 Rules of Effective UX Writing https://builtin.com/design-ux/effective-ux-writing 16 Rules of Effective UX Writing Although too many teams treat it as an afterthought, you should work on UX writing from the start of the design process. Here are some rules for crafting great copy to help users make the most of your product. builtin.com UX라이팅의 16가지 규칙 많은 사람들이 UX라이팅은 디자인 프로세스의 후반에 이루어지는 작업으로 생.. 2024. 2. 4.
[번역] PM으로서 물어야 하는 14개의 질문 원문 14 questions to ask as a Product Manager https://medium.com/design-bootcamp/14-questions-to-ask-as-a-product-manager-bf7382c75928 14 questions to ask as a Product Manager There are no technical requirements to be a product manager. You don’t need a fancy degree, or to pass a certification exam that tests for… bootcamp.uxdesign.cc PM으로서 물어야 하는 14개의 질문 특별한 기술이 있어야만 PM이 될 수 있는 것은 아니다. 뛰어난 학위가 필요.. 2023. 11. 9.
[번역] 7가지 검증된 UX 리서치 기법의 특징과 장점 원문 7 Great, Tried and Tested UX Research Techniques https://www.interaction-design.org/literature/article/7-great-tried-and-tested-ux-research-techniques 7 Great, Tried and Tested UX Research TechniquesThinking about conducting some user research? Wondering which techniques are most likely to provide useful results? Then look no further. We’ve compiled a list of 7 excellent techniques which are .. 2023. 9. 24.
Viewport의 개념 - 해상도와 뷰포트(Viewport size)를 구분하자 * * 뷰포트(Viewport)란 디바이스에서 그래픽을 노출하는 영역의 크기를 말하며, 해상도와는 다른 개념입니다. Html에서 작성하는 width, height 그리고 그것을 바라보는 vh, vw 등의 단위는 모두 viewport에 준거합니다. 케이스를 통해서 뷰포트에 대한 이해를 조금 더 명확히 해볼 수 있습니다. 1. 디바이스별 해상도/스크린 크기/뷰포트 비교 디바이스 해상도 스크린 크기 뷰포트 iPhone 13 mini 1080x2340 5.4" 360x780 iPhone 13 Pro 1170x2352 5.4" 390x844 iPhone 13 Pro Max 1284x2778 6.7" 428x926 Huawei Mate 20 Lite 1080x2340 6.3" 360x780 Huawei Mate 2.. 2023. 3. 19.
[CSS/jQuery] hover/mouseover/mouseenter 실습 예제 * * MouseHover, Hover, mouseover, mouseenter 모두 '마우스 커서가 객체에 올라갔을 때' 이벤트를 발생시키는 메서드라고 볼 수 있습니다. 1. 먼저 언어에 따라서 사용하는 표현이 어떻게 달라지는지 간단히 알아보고 2. 특히 CSS와 jQuery에서는 각 메서드가 어떻게 다른지 예제로 실습해보겠습니다. 예제 링크는 아래와 같습니다. https://codepen.io/noa-xyz/pen/KKBmKqq hover/mouseover ... codepen.io 1. 언어에 따라서 사용하는 표현이 어떻게 달라지는지 C# MouseHover - 대상에 커서가 올라가 있을 때 이벤트를 발생시킵니다. (대상에 커서를 올리면, 즉시는 아니지만 직후에 이벤트가 발생하는 것을 볼 수 있습니.. 2023. 1. 20.
개명하면 CI, DI가 변경될까? - CI,DI의 개념과 특징 CI와 DI는 모두 개인정보에 해당합니다. 서비스에서 중복가입 여부 확인, 타 서비스와의 회원 통합 등을 위해서 CI나 DI를 수집/이용하고자 하면 사용자의 동의를 얻어야 합니다. 개발 관점에서는 본인인증 리턴 값의 하나로 볼 수 있습니다. 일례로 NICE 평가정보를 통한 휴대폰 본인인증 시 리턴받을 수 있는 값들은 아래와 같습니다. - 복호화한 시간(yymmddhhmmss), 요청번호, NICE응답번호, 인증수단, 성명, 성별, 생년월일(yyyymmdd), 내/외국인 정보, DI, CI, 휴대폰번호, 통신사 CI(Connecting Information; 연계정보) CI는 Connecting Information(연계정보)의 약자로, 흔히 '제2의 주민등록번호', '온라인 주민등록번호'로 지칭됩니다. .. 2022. 9. 6.
웹사이트의 트래픽을 측정할 수 있는 무료 측정도구 11가지 웹사이트의 트래픽을 측정할 수 있는 무료 측정도구 11가지 - SEMrush - SimilarWeb - Ubersuggest - Serpstat - Ahrefs - MonsterInsights - Brand Overflow - Sitechecker - Website IQ - Fathom - Quantcast 자사뿐만 아니라 URL만 입력하면, 아무 웹사이트의 트래픽을 분석할 수 있는 측정도구들입니다. 대체로는 제한적으로나마 무료로 사용할 수 있습니다. 그 중에서 가장 많이 사용하는 측정도구는 - SEMrush(에스이엠러시) - SimilarWeb(시밀러웹) 두 가지입니다. 두 가지에 대해서는 무료로 사용할 수 있는 범위에 대해서 간략한 특징도 살펴보겠습니다. SEMrush - 제한적인 영역 내에서 계정 .. 2022. 3. 31.
[번역] UX를 측정하기 위한 5가지 지표 UX를 측정하기 위한 5가지 지표 아래는 UX Collective에서 발행된 "How do you measure UX? It depends on how you define ‘UX’"를 요약발췌한 글입니다. 요약발췌를 위한 과정에서, 내용을 곡해하지 않는 선에서 부분적인 재가공이 이루어졌습니다. 각 지표에 대해 소개되는 측정법들에 대한 정보는 원문에서 더 확인하실 수 있습니다. https://uxdesign.cc/how-do-you-measure-ux-it-depends-on-how-you-define-ux-c7e2ddc95c6c How do you measure UX? It depends on how you define ‘UX’ “If you cannot measure it, you cannot impr.. 2022. 3. 18.
[번역] 2022년, 마케터가 주목해야할 인스타그램에 대한 35가지 통계 2022년, 마케터가 주목해야할 인스타그램에 대한 35가지 통계 아래는 Hootsuite에서 발행된 "35 Instagram Stats That Matter to Marketers in 2022"를 요약발췌한 글입니다. 요약발췌를 위한 과정에서, 내용을 곡해하지 않는 선에서 부분적인 재가공이 이루어졌습니다. 원문에서 35개의 각 수치 및 통계의 출처를 확인할 수 있습니다. https://blog.hootsuite.com/instagram-statistics/ 35 Instagram Stats That Matter to Marketers in 2022 Instagram experienced a huge amount of growth in 2021. These Instagram statistics prove.. 2022. 2. 6.
Parallax Scrolling을 잘 활용한 웹사이트 레퍼런스 2 패럴렉스 스크롤링은 일반적으로 웹 페이지 상의 요소들이 스크롤에 각기 다르게 반응하는 것(또는 그렇게 작동하도록 하는 기법)을 의미합니다. 패럴렉스 스크롤링은 흔히 스토리텔링에 활용하기 좋다고 이야기합니다. 요소들이 각기 나타나고 고정되고 사라지는 움직임은, 콘텐츠화된 웹 페이지의 어떤 위치에서 어떤 요소에 사용자의 시선을 집중시킬지 의도를 반영하기 적합하기 때문이 아닌가 합니다. 그런 만큼 장식적인 효과를 넘어서, UX 디자인의 관점에서 패럴렉스 스크롤링이 어떻게 적용되고 표현될 수 있는지 참고할 만한 웹페이지를 모아보았습니다. 1. iPad Pro 애플의 신제품 소개 페이지는 매번 스크롤 효과의 향연인 걸로 기억합니다. https://www.apple.com/ipad-pro/ iPad Pro The .. 2022. 1. 12.
웹사이트/블로그에 Google Analytics 연결하기 구글애널리틱스(Google Analytics. 이하 GA)는 구글 사용자라면 무료로 이용할 수 있는 데이터 분석 도구입니다. 더불어 구글애즈, 서치콘솔 등의 서비스와 연동하여 시너지를 낼 수 있는 것이 큰 장점입니다. GA는 웹사이트에 도달한 사용자의 언어(사용 브라우저의 설정 언어), 브라우저 유형, 디바이스, OS, 트래픽 소스(유입 경로) 등을 분석 자료로 제공합니다. 그것에 기반한 통계 및 분석 자료는 웹사이트의 현재를 진단하고 앞으로의 목표와 운영 방침을 설정하는 일에 큰 도움이 될 것입니다. 오늘은 그 GA를 웹사이트/블로그에 연결해보겠습니다. 1. GA계정과 속성 생성 GA의 구조 다음과 같습니다. 조직(Organization) > 계정(Account) > 속성(Property) > 보기(V.. 2022. 1. 10.
Parallax Scrolling을 잘 활용한 웹사이트 레퍼런스 +2022.01.13추가) 포스팅 이후로 시간이 지나면서, 소개드린 도메인 중 일부가 만료되었습니다. 확인하여 만료된 도메인에는 취소선을 그었습니다. 또한 추가 레퍼런스를 소개하는 새 글을 작성했습니다. https://noa-xyz.tistory.com/37 parallax scrolling 홈페이지 레퍼런스2 패럴렉스 스크롤링은 일반적으로 웹 페이지 상의 요소들이 스크롤에 각기 다르게 반응하는 것(또는 그렇게 작동하도록 하는 기법)을 의미합니다. 패럴렉스 스크롤링은 흔히 스토리텔링에 활 noa-xyz.tistory.com 패럴랙스 스크롤링Parallax Scrolling은 스크롤을 할 때 개체마다 움직이는 속도를 다르게 한 것을 말하죠. 원경과 전경을 구분해서 입체감과 원근감을 줄 수도 있고, 같은 심.. 2019. 11. 24.
Google Firebase 웹사이트 무료 호스팅하기 파이어베이스는 모바일/웹 어플리케이션 개발 플랫폼으로 현재는 구글에 인수되어 서비스되고 있습니다. 웹 호스팅 목적으로 사용할 때엔, 동적인 웹페이지를 호스팅하기에는 제약이 많다고는 하지만, 구글 계정 하나당 50개의 프로젝트를 생성해서 사용할 수 있고, 프리 티어 사용량이 각 프로젝트에 별도로 적용된다는 장점이 있습니다. 무엇보다 백엔드나 서버에 대한 사전 지식이 없어도 쉽게 배포할 수 있습니다. 준비물: 구글 아이디, 호스팅할 파일 그럼 먼저, 파이어베이스 프로젝트를 만들도록 하겠습니다. 1. 파이어베이스 시작하기 https://firebase.google.com 구글에 로그인하고 파이어베이스 사이트에 접속해서 '시작하기' 클릭 2. 프로젝트 추가 프로젝트 추가를 선택하면 프로젝트의 이름을 정합니다. .. 2019. 10. 1.
웹페이지를 apk 앱으로 | 쉽게 따라하는 웹앱 만들기 웹페이지를 안드로이드 앱으로 만드는 방법입니다. web to app convert 라고 많이 검색이 되지만, 정확히 말하자면 변환을 하는 것이 아니라 apk를 제작하되, webView를 통해서 앱을 실행하면 자신의 웹페이지가 표시되도록 하는 것입니다. 홈페이지, 블로그 등 특정 URL을 표시하는 어플리케이션을 만드는 것입니다. 안드로이드 스튜디오로 작업할 것이고, 차근차근 배우기 보다는 아이콘, 스플래시 이미지(로딩 페이지), 연결할 URL, 어플리케이션 이름과 같이 커스텀 해야 하는 부분을 제외하고는 작성된 스크립트를 복붙하며 빠르게 웹앱을 만들어 볼 것입니다. 1. 프로젝트 생성 File > New > New Project 로 새 프로젝트를 생성합니다. Empty Activity를 선택하고 Next로.. 2019. 8. 24.
Insta360 Pro 2 사용후기 및 장단점 인스타 360 pro 2가 출시된지 1년이 되었습니다. 약 6개월 동안 주로 영상을 찍으며 느낀 점을 장단점 중심으로 간단하게 적어볼까 합니다. *제가 체감한 특징은 주로 고프로나 A7S2를 여러 개 사용할 때와 비교했을 때입니다. 비슷한 장비로 견주어지는 칸다오 옵시디언과 비교했을 때의 특징과는 다를 수있습니다. 먼저 장점입니다. 아주 주관적으로, 몇 가지 특징들에 대해서만 담고 있는 내용이라는 점 참고해 주시기 바랍니다. 1. 프리뷰 파일 자동 생성 프로2에는 일반 SD카드 1개와 마이크로SD카드 6개가 동시에 들어갑니다. 각 마이크로 SD카드에는 각 렌즈의 영상이 저장되고, SD카드에는 저용량의 프리뷰 영상이 자동 스티칭되어서 생성됩니다. 저화질이긴 하지만, 촬영 중간에 확인해 보기에는 충분합니다... 2019. 8. 21.
728x90

티스토리툴바