#mobile

질문 7

해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

10달 전 · 홍지상 님의 새로운 댓글

요즘 들어 많이 보이는 형태의 UX/UI 레이아웃 디자인을 지칭하는 용어가 있을까요?

안녕하세요. 최근에 쇼핑몰이나 온라인 서비스를 브라우저로 서칭하다보면 자주 보이는 형태가 있는데요. 모바일 크기인데 데스크톱이든 태블릿이든 상관없이 스마트폰 크기 하나만 지원하는 제품이 많이 보이더군요. 스마트폰보다 큰 화면에서 접속하면 양 옆이 footer 역할을 하는 형태의 제품 레이아웃을 보이기도 합니다. 반응형 대신 모바일 디자인만 고려하면 된다는 점에서 관심이 생겼는데, 이러한 레이아웃 디자인을 부르는 명칭이나 용어가 있을까 해서 질문 드립니다. Tailwind CSS를 접하면서 모바일 우선(Mobile-first)이라는 용어는 알고 있습니다. 그렇다면 저런 형태는 모바일 온리(Mobile-only)라고 부르는 걸까요? 특정 사이트를 언급해도 되는지 모르겠지만, 링크 걸어보고 문제 시 알려주시면 수정하겠습니다. - 페이브릴 https://fabrill.co.kr - 밸런스 https://www.balance.site - 모두의셔틀 https://www.modooshuttle.com - 팬심 https://fancim.me 조금 더 넓은 범위의 레이아웃을 보여주는 - 모요 https://www.moyoplan.com

디자이너

#ui/ux

#layout

#design

답변 1

일 년 전 · 프레드윰 님의 새로운 답변

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

개발자

#html-css-js

#웹디자인

#css

#html

#script

답변 2

일 년 전 · 그린티라떼 님의 새로운 답변

react에서 복잡한 상태를 관리할때.. 한번에 관리? 분리해서 관리? (jotai, recoil, useState)

안녕하세요 react를 이용해서 복잡한 작성 페이지를 만들고있습니다. 아래의 타입은 예시입니다. type payload = { name: string; message: string; type: string; url: { pc: string; mobile: string; }; contents: { images: { url: string; name: string; }[]; buttons: { name: string; url: string; }[]; }; conditions: { ... }, .... }; 위처럼 복잡한 데이터를 서버로 보내줘야해서 데이터를 관리해야하는데 현재는 페이지내에 구조가 복잡하고 컴포넌트도 매우많아 props drilling이 너무 심해질거같아서 recoil, jotai와 같은 상태관리 라이브러리를 이용해서 작업을 진행하고있습니다. 이러한 상황에서 관리하는 데이터를 한객체에 모아서 관리하는게 좋은지 아니면 const nameAtom = atom(''); const messageAtom = atom(''); const typeAtom = atom(''); const urlAtom = atom({ pc: '', mobile: ''}); .... 처럼 일일히 쪼개서 관리하는게 맞는 방향인지 모르겠어서 질문드립니다 ! (사수가없어서 물어볼곳이없어요...) 현재는 아래와같이 쪼개서 작업한뒤 submit시에 합쳐주는 방식으로 구현해놓았는데 atom 갯수가 20개 정도 되버리니까 너무 복잡해보여서 이게맞나... 싶어서 질문드리게되었습니다.

개발자

#react

#frontend

답변 2

보충이 필요해요 1

일 년 전 · 황민호 님의 답변 업데이트

리워드 시스템 같은 이벤트를 진행하는 경우(다양한 플랫폼으로 인한 이슈)

안녕하세요 개발자가 아닌 직군으로, 개발자분께 신규 기능 요청드리려는데 혼자 해결하기 어려워서 질문 드립니다.ㅠㅠ (상황) - PC, Mobile Web,APP 플랫폼 종류가 다양한 경우 - A라는 회원이 B라는 사람(비회원) 또는 SNS 에 리워드 시스템 같은 이벤트 링크를 공유한다고 가정 (문제) - (해당 이벤트 링크에 A의 아이디나 회원번호등을 파라미터에 암호화해서 들어가는 것으로 알고 있음) 카톡으로 링크를 공유할 뿐만 아니라 SNS 등 다양한 사이트의 본인의 링크를 게시 - 공유받은 사람이 비회원인 경우, 앱뿐만 아니라 다른 플랫폼등으로 접속하는 경우 앱설치, 회원가입 등을 진행하면서 해당 파라미터값이 누수되어 리워드를 받지 못할 가능성 존재 (궁금한점) - 누수를 막을 방법? (답변 예시. 링크 보유 시점을 설정하라...등) 혼자 고민하려고 하니 며칠째 답이 안 나오는데 도움 구합니다......

개발자

#리워드

#기획

#개발

#쿠키

답변 1

일 년 전 · 김하림 님의 답변 업데이트

NextJS13 모바일 구분 및 기술 문의

안녕하세요 nextjs13 으로 프로젝트를 진행할려고 하면서 문의 사항이 있습니다. 전제 조건으로 하이브리드앱으로 구현 예정이며, 웹뷰 방식으로 웹, 앱을 같이 사용할려고 합니다. (레이아웃을 웹, 앱 별도 구성 예정) 궁금한게 많아서 질문이 많이 있네요. 전문가분들 도움 부탁드립니다. 1. react-device-detect 모바일 여부를 구분하여 레이아웃을 구성할려고하는데, MobileView의 경우 use client 에서만 작동되는 것같습니다. MobileView을 사용하여 ssr 사용은 불가능한건가요? 2. style-component nextjs12 에서는 style-component를 사용되었는데 13으로 올라가면서 css-in-js방식을 사용 못하는것으로 보이며, tailwindcss, postcss를 권장하는걸로 보이는데 맞나요? 추가로 style-component 를 use client로 사용할 경우 하위에 들어가는 컴포넌트들이 다 csr 형식으로 되는게 맞는건가요? 3. RCS(React Server Components) children 으로 화면을 넘겨서 사용하는데 중간에 use client 를 사용하면 하위도 csr 형태로 인식이 되는건지 문의 드립니다. 감사합니다.

개발자

#react

#nextjs

#next13

#nextjs13

#ssr

답변 1

추천해요 1

일 년 전 · swgtgwxd45 님의 댓글 업데이트

ios safari Mobile input focus 시 키보드가 올라오지 않습니다.

현재 React + Typescript로 모바일 웹을 개발하고 있습니다. 페이지가 처음으로 렌더링 시 input에 focus를 줘서 키패드가 올라오도록 구현하고 싶습니다. 하지만 ios safari mobile 환경에서 useRef를 사용하여 focus를 주니 focus는 잘 작동하지만 키패드가 올라오지 않고 있습니다. 찾아보니 IOS에서 정책상의 문제로 막아놨다고 합니다만 다른 서비스의 모바일 웹 래퍼런스를 봤을 때 제가 원하는 기능을 작동하는 곳이 몇 곳 있었습니다. 혹시 구현할 수 있는 방법이 있을까요? 시도해봤던 방법으로는 사용자와의 인터렉션을 통해 가능하다고 IOS의 정책에 나와있어서 hidden으로 숨겨놓은 버튼을 하나 추가하여 click event에 focus를 주도록 하고 렌더링 시 클릭 이벤트를 호출해봤었습니다. 아쉽게도 원하는대로 동작은 안했지만.. 도움 주시면 감사하겠습니다.

개발자

#react

#typescript

#useref

답변 2

2년 전 · 커리어리 AI 봇 님의 새로운 답변

media query가 배포환경 mobile에선 작동을 안해요… ㅜㅜ

안녕하세요 ! Nextjs 를 이용해서 프로젝트를 진행하고있습니다 ! 개발중 크롬 개발자도구에서 모바일버전으로 했을땐 잘 동작하다가 배포환경에서 아이폰으로 접속했을때는 제대로 동작을 안하더라구요... // size.ts const MOBILE_PX = '768px' export const MOBILE_MODE = `(max-width: ${MOBILE_PX}) as const` // index.ts import {MOBILE_MODE} from '~~~' @media (${MOBILE_MODE}) { display:flex; flex-direction: column; } 예를 들어 이런형식으로 구성되어있는데 혹시 문제를 아시는 분 있을까요? ㅠㅠ 구글에 가장 많이나오는 글인 <meta name="viewport" ~~~ /> 태그는 예전에 삽입되어있구... 읽어주셔서 감사합니다 !

개발자

#css

#react

#nextjs

답변 2

2년 전 · 성원 님의 답변 업데이트

next.js getStaticProps에서 user agent를 확인하는 방법?

안녕하세요 next.js로 웹 사이트를 만들고 있는데 질문이 있습니다. 서버사이드에서 mobile 기기 접속여부를 알아야 하는데 getStaticProps안에서 user agent를 확인하는 방법이 있을까요?

개발자

#react

#next.js

#getstaticprops

답변 1

추천해요 2

2년 전 · 익명 님의 새로운 댓글

현직자가 바라보는 개발 교육 프로그램 견해에 대해

안녕하세요. 현재 모바일 안드로이드 개발자를 목표로 하는 25살 졸업예정 대학생입니다. 안드로이드 개발에 대한 지식과 협업 경험을 쌓고자 해당 교육 프로그램에 참여하고자 합니다. 현재 수 많은 개발 교육 프로그램이 있는데, 이 중 SSAFY mobile 트랙과 우아한테크코스 안드로이드 두 과정에 대해 현직자가 바라보는 해당 교육에 관한 견해, 인식을 여쭤보고 싶습니다..

개발자

답변 1

추천해요 3

2년 전 · 익명 님의 질문 업데이트

useRef를 사용해서 window resize hook을 만들었는데 잘 동작하지 않습니다.

안녕하세요..! window size를 체크해서 mobile여부를 확인하는 커스텀 훅을 만들었습니다. 코드도 아래 첨부합니다. 원하는 대로 동작하지 않네요 크롬 개발자도구로 윈도우 사이즈를 줄여봤는데 useIsMobile의 리턴값이 false입니다. 혹시 뭐가 문제인지 아시는분 답변 부탁드립니다!

개발자

#react

답변 2

추천해요 1