2019.06.18 모바일 연락처 링크걸기 & 장고 모바일 환경 테스트하기

모바일 웹에서 연락처 링크 걸기

• 모바일 반응형 웹에서 가장 중요한 기능중에 한 개가 화면에 나오는 연락처를 클릭했을 때 바로 연락할 수 있도록 하는 것이다.

• 굉장히 단순한 기능인데 이것으로 인해서 정말 사용성이 180도 변한다.
• 굉장히 어려울지 알았는데 간단하였다.

구현 방법

<a href="tel:010-0000-0000">010-0000-0000</a>

• 너무 간단해서… 놀랄 수도 있는데 정말 저것만 하면 된다..
• 충격적이다 ㅎㅎㅎ
• 보통 하나의 연락처 말고 나오는 object마다 걸어주어야 할 때가 많을 텐데 장고에서는 과 같은 것으로 010-0000-0000을 대처할 수 있다. (물론 object를 생성하고 phone 모델이 있다는 가정하이다.

장고 모바일 환경에서 테스트하기

• 요즘은 크롬에서 모바일 환경에서 테스트할 수 있도록 도구를 잘 지원해준다.
• 기본적으로는

• 개발자 도구에서 우측 상단에 동그라미 친 부분을 누르면 컴퓨터 환경인지 모바일 환경인지 테스트 할 수 있다.
• 하지만 하다보면 … 이것도 믿음이 잘 안가고 휴대폰에서 어떤 느낌인지 테스트 해보고 싶을 때가 많다. 무엇보다 실제 사용할 때는 보여지는 것과 사용하는 것이 다르기 때문이다.

해결방안

• 같은 IP 주소(같은 와이파이) 환경에서 테스트가 가능하다.
• 노트북과 휴대폰을 같은 와이파이를 잡고 실험해도 되고, 그렇지 않으면 그냥 휴대폰 핫스팟을 틀고 그것을 노트북이 잡아도 된다.
• 그렇게 연결한 후에 해당 IP를 확인한다. (IP 확인 방법은 구글링하면 바로 나오므로 생략한다.)

python manage.py runserver 해당IP:포트번호

• 그리고 실행되는 IP 및 포트번호 링크로 모바일에서 접속해도 되는 것을 확인할 수 있다.