본문 바로가기

전체 글320

관세청 개인통관고유부호 연락처 변경하기 해외 직구를 할 때 필요한 개인통관고유부호와 연락처가 일치해야 하는 모양이다. 뭔가를 주문할 때마다 판매자에게 연락처가 다르니 확인 바란다는 연락이 와서 여간 번거로운 것이 아니었다. 그러다가 큰 맘 먹고(!) 관세청 개인통관고유부호에 등록되어 있는 연락처를 변경해보기로 했다. 개인통관고유부호란? 개인정보 유출을 방지하기 위해 관세청에서 해외 직구 시 활용할 수 있는 개인통관고유부호 제도를 운영하고 있다. 개인 식별을 위한 이 고유부호는 '모바일관세청' 앱이나 '개인통관고유부호' 웹사이트에서 신청한 즉시 발급이 가능하다. P로 시작하는 13자리 번호로 이루어져 있는데, 한 번만 발급해두면 계속 같은 고유번호를 사용할 수 있어 편리하다. 만약 기억이 나지 않는다면 앱 또는 웹사이트를 통해 본인 인증 절차를.. 2023. 3. 22.
피그마 프로토타입 예제 - 슬라이드 배너 만들기(캐러셀 인터랙티브 컴포넌트) 드래그하면 옆으로 넘어가는 슬라이드 배너는 홈페이지의 메인에서 흔히 볼 수 있는 UI 이다. 이렇게 슬라이드 형태로 넘기는 UI를 캐러셀이라고 부른다. 이번 포스팅에서는 피그마로 캐러셀 배너 프로토타입 만드는 방법에 대해서 소개하려고 한다. 슬라이드 배너 프로토타입 만들기 먼저 피그마 파일을 하나 생성해서, 아래와 같은 구조의 디자인 시안을 만든다. 각 슬라이드가 보여지는 화면을 각각의 프레임으로 나누어 제작해야 한다. 디자인 요소들을 모두 만들었다면 첫번째 배너 이미지를 선택하고, 두번째 프레임으로 드래그한다. 인터렉션 디테일은 On drag, Smart animate, Ease in and out으로 지정한다. 애니메이션 속도는 300~500을 추천하는데, 본인 취향에 맞게 설정해 주면 된다. 나머지.. 2023. 3. 10.
내용에 꺽쇠 기호(<>) 텍스트 넣는 방법 화면에 태그와 같은 형태의 꺽쇠 기호() 넣는 방법에 대해서 알아보자. 다른 말로는 '홑화살괄호'라고도 부른다. html에서 내용을 작성할 때 html 태그와 같은 형태의 , , 등을 텍스트로 넣고 싶을 때가 있을 것이다. 예를 들어 아래와 같은 코드를 작성하였다고 가정해보자. html 태그의 종류 태그는 내가 표시하고 싶은 대상의 양쪽에 꺽쇠()를 사용해서 태그 이름을 적어주면 된다. 대표적인 태그들은 아래와 같다. - 태그는 heading의 약자로 제목이다. - 태그는 paragraph의 약자로 하나의 문단을 만들 때 쓴다. - 태그는 bold의 약자로 글씨를 굵게 표현한다. 위 코드를 화면으로 그리면 웹 브라우저에서 , , 태그를 설명하는 부분이 제대로 보이지 않는다. 이유는 이 텍스트들을 html.. 2023. 3. 9.
맥북에서 키보드 스페이스 바 두 번 눌렀을 때 마침표(.) 나오는 현상 해결하기 마이크로소프트 워드 프로그램을 이용해서 문서작업을 하는데, 자꾸만 내가 입력하지 않은 마침표(.)가 입력되는 현상을 발견했다. 처음에는 키보드가 고장난 줄 알고 계속 지우고 쓰고를 반복했다. 그러다가 내가 키보드의 스페이스 바를 연속으로 두 번 누르면 마침표(.)가 자동으로 찍힌다는 것을 알아냈다. 하...🤔 아니, 나는 설문지를 만들고 있는 중이라 계속 밑줄 띄어쓰기를 해야 하는데 계속 마침표가 생기면 어떻게 하나...? 불편함이 이만 저만이 아니라 얼른 구글신님께 도움을 청하고, 빠르게 문제를 해결할 수 있었다. 맥북에서 스페이스 바 두 번 눌렀을 때 마침표 나오는 현상 해결방법 Dock 바에서 시스템 설정 아이콘을 찾아서 클릭한다. 무언가 설정하고 싶을 때 무조건 한 번은 클릭하게 되는... 아마 .. 2023. 3. 3.
교통민원24 어플(모바일)로 운전면허 갱신기간 확인하기 운전면허증 갱신기간이라고 해서 온라인으로 적성검사를 진행해보려다가 2년 전 공단에서 진행했던 시력검사 때문에 부적격 판정을 받았다. 온라인으로 갱신하기 위해서는 시력이 일정 수치 이상 나와야 하는데, 나는 하필이면 건강검진 하던 날에 안경을 가져가지 않아서 낮은 시력만 기록되어 있고, 지금은 스마일 라식 수술을 해서 시력이 좋은 상태이고...🥲 이런 경우 면허시험장에 직접 가서 갱신을 해야 하는데, 나는 다음 달에 건강검진을 예약해 둔 상태라 갱신 기간이 길다면 굳이 방문하지 않고 건강검진 후에 다시 온라인 진행이 가능한 상황이었다. 그래서 모바일로 운전면허 갱신기간을 확인해 본 결과, 면허증 갱신은 서두르지 않고 천천히 해도 되겠다는 결론을 내렸다. 나와 같이 운전면허 갱신 기간이 궁금하신 분들을 위해.. 2023. 3. 3.
피그마 프로토타입 (3) 애니메이션 설정하기 지난 포스팅에서 피그마 프로그램으로 웹 프로토타입 만드는 방법에 대해서 소개했었다. 2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기 2023.02.17 - [디자인/Figma] - 피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기 오늘은 인터렉션 트리거, 액션 설정에 이어 애니메이션을 설정하는 방법에 대해서 알아보려고 한다. 피그마에서 제공하는 프로토타입 기능을 제대로 배워두면, 별도 프로토타입 제작 프로그램을 사용하지 않아도 충분히 멋진 ui 프로토타입을 만들 수 있다고 생각한다. 애니메이션은 아래와 같이 액션이 None 상태일때는 설정할 수 없다. (당연하잖아?) 어떻게 움직이게 할 것인지 선택을 해야 하단에 애니메이션 항목이 보여진다. 나는 액션을.. 2023. 3. 2.
한 달에 한 번은 점심 회식~ 오늘은 판교맛집 장모밥상! 내가 다니는 디자인팀 구성원은 총 4명이다. 판교 음식점은 물가가 비싼 편이라, 우리는 보통 점심식사로 도시락을 싸 오거나 샐러드 등을 배달시켜 먹는다. 프레시코드 등 다양한 온라인 배송 업체를 도장깨기 하는 중인데, 이 포스팅을 쓰고 있는 현재에는 '위잇딜라이트'라는 업체에 드러누워있는 상태다. 금액 대비 가성비도 좋고, 배송도 빠르고 정확해서 마음에 든다. 한동안은 점심 배송 업체를 바꾸지 않을 것 같다. 그리고 한 달에 한 번은 점심 회식을 한다. (이걸 회식이라고 불러야 하나?) 매월 각 팀에 지급되는, 더 정확하게 말하자면 책임 리더님께 지급되는 티타임비를 이용해서 외식을 한다. 우리가 자주 가는 맛있는 생선구이집이 운중동에 한 곳 있는데... 가는날이 장날이라고 오늘은 건물 리모델링 중이어서 .. 2023. 2. 28.
코드잇 학습일기 Day8. rejected 상태에서 실행하는 콜백, then 메소드 이해 코딩인강 코드잇의 챌린지 이벤트, 마지막 학습일기 포스팅이다. 회사를 다니며 학습일기를 써야한다는 게 부담스럽게 느껴질 때도 있었지만 그래도 덕분에 하루에 다섯개씩 강의를 들을 수 있었다. 왠지 마지막이라고 하니까 시원섭섭한 기분이 든다. 나중에 회사 업무에 여유가 생기면 꼭 이벤트가 아니더라도 셀프 챌린지를 해봐도 좋겠다는 생각이다. 오늘 공부한 내용은 rejected 상태에서 실행할 콜백을 지정하는 방법과 then 메소드에 관한 것이었다. 자바스크립트를 공부하는 분들을 위해 포스팅으로 정리해 보도록 하겠다. Promise 객체가 Rejected 상태일 때 실행하는 콜백 지정 Promise 객체가 갖는 상태값은 pending, fulfilled, rejected - 총 3개이다. 더 자세히 알고 싶다면.. 2023. 2. 22.
코드잇 학습일기 Day7. Promise 객체와 Promise Chaining 벌써 코드잇 학습일기 챌린지 마지막 주가 되었다. 시간이 정말 빠른 것 같다. 그리고 한달이 다 되어가는데 아무리 회사 업무가 바쁘다지만 나는 토픽 하나도 제대로 끝내지 못하고... 그렇다고 자바스크립트 웹 기본기를 잘 다졌냐고 물으면 그것도 자신이 없고... 솔직히 조금 속상하다. 그래도 포기하지 않으면 언젠가는 잘 할 수 있게 되리라 믿으며, 오늘도 코딩 인강 시작! fetch 함수는 promise 객체를 리턴한다고 한다. 그렇다면 promise 객체는 무엇일까? Promise 객체란? 어떤 작업에 대한 '상태 정보'를 가지고 있는 객체이다. 예를 들어 fetch 함수를 보내면 성공할 수도 있고, 실패할 수도 있는데 이러한 정보들이 promise 객체에 저장된다. promise 객체는 3개의 상태 정.. 2023. 2. 20.
피그마 프로토타입 (2) 인터렉션 트리거, 액션 설정하기 이전 포스팅에서 피그마 프로토타입 화면의 기본 구성에 대해서 설명했다. 2023.02.16 - [디자인/Figma] - 피그마 프로토타입 (1) 기본 화면 살펴보기 이제부터는 프로토타입 메뉴의 설정 옵션들에 대해서 하나씩 자세히 설명하려고 한다. 예제가 필요할 듯 하여 빨간색, 노란색 박스가 들어있는 화면 두 개를 준비했다. 화살표 형태의 커넥션을 선택하면 인터렉션과 애니메이션을 설정할 수 있다. 이번 포스팅에서는 애니메이션은 제외하고, 먼저 Interaction details 부분에 대해서 살펴보도록 하겠다. 첫번째 On tap 이라고 되어 있는 부분은 '트리거' 라고 불리는데, 이 곳에서 클릭, 드래그, 마우스 오버와 같은 트리거의 종류를 선택할 수 있다. 트리거 종류별 움직임은 아래와 같다. Non.. 2023. 2. 17.

티스토리툴바