전체 글(97)
-
쪽지함 및 쪽지보내기에 대한 1차 기획
별표는 '중요'처리. 별비어있는건 일반이란 의미.기사와 상점을 나눈것은, 기존에 그렇게 되어있었기 때문인데, 일률화를 해야하나 라는 이야기도 나왔었다. 대략적인 쪽지 조회 - 와이어 프레임. 참고로 쪽지기능은 내부 회의를 거쳐 하지 않는것으로 진행됐다. 위에는 단순 와이어프레임. 기획적으로 정리가 많이 진행된 상태는 아니었다.
18:36:36 -
하나의 팝업창 안에 선택지를 뿌려줘야 하는 경우
배달 불가 사유를 선택하는 창을 만들어야 하는데, 후보를 다양하게 해보았다.원래는 탭을 나누어서 뎁스를 나눠보려고 했는데,하나의 화면에서 바로 다 확인 가능한게 좋을 것다고 해서, 스크롤만 하면 바로 볼 수 있게 진행되었다. UI적으로 1) 뎁스나누기 2) 다 보여주기 3) 다 보여준다면 어떻게, 얼마나 보여줄지를 고민해보았었음. 위에는 뎁스를 나눈건 아니고, 카테고리화 시킨 예시. 도리어 하나하나 다 눌러보아야 해서 번거롭다는 의견을 들었다. 아래는 UI 및 세부 디자인 여러가지를 적용시킨 예시. 1-2 코드번호의 경우, API문서에 적혀있는 해당 코드번호를 활용하였음. 각 옵션별로 상세 설명이 덧붙여진 방식이라던가, 자주 사용하는 목록을 관리자가 정해서 상단에 노출시켜주는 방법도 고민했다. ..
10:42:25 -
우리회사는 디자이너가 없다. AI로 만든 UI를 figma에 바로 이식하는 방법
기획자 개발자: ai있으면 뭐해요, ui 만들어줘도 그거 보고 띄엄띄엄 또 그리고 만들어야 하는데... → ai로 만든 파일을 figma에 바로 이식하는 방법을 알아보자.방법은 매우 간단하다. (1) ui를 만들어달라고 한 다음, html 파일 형식으로 다운받는다. (2) figma plugin에서 html.to.design을 다운받는다 (3) 1에서 다운받은 html zip 파일을 업로드한다. (4) 옵션들 선택한다음, 진행(proceed) 버튼 누르면 끝 - 마스터 컴포넌트, 오토 레이아웃 등등 자동으로 돼서 아주 좋다. 강추. 개발, 디자인, 기획의 영역이 흐려지고 있다.두세가지 영역에 전부 능통하진 못하더라도, 적어도 다른 영역을 적극적으로 흡수는 해야한다.
2026.10.16 -
이럴땐 어떡하지? → 경쟁사 혹은 협력사의 구현을 따온다.
보통 래퍼런스 참고는 처음 기획이나 디자인 착수할때 찾는 경우가 많은데,반드시 초반부가 아니라 중후반부여도 충분히 래퍼런스 참고가 도움이 된다. 예를들어, 최근 작업에서 이륜차 번호를 입력받는 상황이 필요했다. 이륜차는 구버전과 신버전이 있는데, 문제는 구버전과 신버전이 모두 사용되고 있는 상황이라, 유효성검사 기준 재설정이 필요했다.재설정 하면서 placeholder도 수정을 어떻게 할까 하고 보았다.placeholder는 "1가2 3456"을 고려중이었는데, 타사를 보니 굳이 입력 예시가 아니라 그냥 "이륜차 번호 입력" 이라고도 적어놓은걸 보았다. 한편으론 띄어쓰기(공백)은 포함하지 않는것을 발견했다. 그리고 focus out이나, [다음] 버튼을 누르지 않더라도 바로 일정 자릿수를 입..
2026.10.15 -
오더 검색 필터 고도화 예시
검색 필터를 구체화하면 좋겠다는 의견이 있어서, 여러가지 후보들을 준비해보았다. - 조건이 매우 다양한 버전인데, 이렇게까지 복잡할 필요는 없다고 하여서 패스. 내부 다른 프로덕트를 참고하여 상대적으로 간단하게 만든 버전. 기타 더 단순화한 버전 (26.09.22 업데이트) 실제로는 모두 기각하고 단순하게 AND와 OR만 추가하여 마무리. 그리고 단어는 검색 필드에 띄어쓰기로 구분하기로 결정.예: 검색어 입력창에 A B C 를 스페이스로 구분하여 입력하고 [AND] 로 조회시, A/B/C가 모두 들어가있는 오더가 검색됨 기획 내용은 대폭 축소되었으나, 현장에서는 매우 요긴하게 쓰이고 있다고 하여 아무튼 굿굿.
2026.09.07 -
캐시 충전 UI 예시
- 타사 래퍼런스 참고: 리디, 포스타입, 스티키밤, 넥슨, 머니트리, PG사 카드결제 예시참고로 위 UI는 후보군이고, 채택은 2번이긴 한데 저 UI에서 좀 더 발전된 형태로 진행되었다. 위 UI는 한줄로 죽 나열되어 제작했는데, 실제로는 PC 프로그램에서만 적용되어 1X2 열 형태로 재제작했다. (전체 요소는 동일) - 카드 유효기간이 의외의 요소였는데, 유효기간 미만 초과 등등 유효성 에러 메세지를 띄우는게 번거롭다는 판단하에 드롭박스로 일괄 처리하였다. 다만 이 경우, 매년 업데이트를 해주어야 한다는 번거로움이 있기는하다. (캐시충전 기능을 26년에 추가하였으므로, 2027년에는 드롭박스에서 26을 제거해야함)
2026.09.07