전체 글

QA 체크포인트 세 가지

By 최미나 QA(Quality Assurance)는 뜻은 '품질 보증'이지만 현업에서는 보통 테크 영역 결과물(웹사이트, 모바일 앱 등)의 완성도와 디테일을 끌어올리기 위해 작업의 후반부에 실시하는 총체적인 작업을 의미한다.  우리도 웹사이트 제작을 할 때 QA에 많은 공을 들이고 있고, 이 과정이 결과물의 퀄리티에 결정적인 영향을 미치기 때문에 'QA를 잘 하는 방법'에 대해서도 지속적으로 개선을 해오고 있다.  아래는 내가 최근의 경험을 바탕으로, QA를 할 때 때때로 놓치기 쉬운 요소들을 간단히 정리해 본 것이다.  1. 테스트 케이스 세분화하기테스트 시나리오 작성 시 케이스를 최대한 세분화하는 것이 중요하다. 일반적으로 메뉴 구조에 따라 시나리오를 구분하고, 각 화면마다 기대하는 시나리오를 작성..

Tech-nics 2024.08.23
49. 고객사 인터뷰: 쪼개서 질문하기

프로젝트 초기에 보통 고객사의 니즈를 파악하기 위한 인터뷰를 하게 되는데, 고객사 담당자들이 우리의 질문에 답하기 어려워할 때가 종종 있다. 우리가 질문한 그 주제에 대해 생각해보지 않았거나, 실무자의 생각은 있지만 회사 차원으로 정리가 안 되었거나. 이유는 여러가지 있을 수 있다.  그러니 상대가 어려워할 가능성이 있는 질문이라면 그것을 고려해서 문장을 만들자.가장 대표적인 방식은 1)"나의 질문에 답해줄 수 있나요?" 와 2)"답해줄 수 있다면 답해주세요."로 질문을 두 덩어리로 구성하는 것이다.  예를 들어 OOO(고객사 브랜드명)을 한 문장으로 정의했을 때의 텍스트를 우리가 알고 싶다고 치자. 그런데 세상에는 자사 브랜드를 한 문장으로 정의하기 어려워하는 곳들도 꽤 많다. 그러니 이런 질문은 사업..

스킬 & 팁 2024.08.15
48. 고객사 미팅 시 의사 결정권자 참석의 중요성

By 홍지호  UXUI 프로젝트를 진행하다 보면, 고객사 미팅을 프로젝트 규모에 따라 적게는 3번, 많게는 10번 이상 하게 된다. 내가 느꼈던 미팅 관련 가장 중요한 포인트 중 하나인 ‘의사 결정권자 참석’에 대해 이야기해 보려고 한다.  우선 ‘의사 결정권자 참석’ 여부가 만드는 차이는 대략 다음과 같다. 1. 의사결정의 속도 차이 의사 결정권자는 프로젝트의 방향성과 주요 결정을 내릴 수 있는 권한을 가진 사람이다. (내가 만나본 의사 결정권자는 회사의 대표자일 때도 있었고, 실무자일 때도 있었다.) 이들이 미팅에 참석하면, 필요한 결정은 대부분 즉각적으로 내린다. 회의 중에 판단이 어려운 사항들도 웬만하면 빠르게 결정된다. 반대로, 의사 결정권자가 참석하지 않는 미팅에서는 중간 참여자가 결정권자에게..

스킬 & 팁 2024.08.04
메일 자동 분류, 필터 및 라벨링 팁

By 황이현 중요한 메일을 놓치지 않고 과거에 주고받은 메일도 쉽게 찾을 수 있도록 메일함을 정리해 놓으면 시간도 절약하고 메인 업무에 집중할 수 있어 좋다.  다만 현실적으로 메일함을 정리하는 데에 많은 시간을 들이긴 어렵기 때문에 메일을 받은 즉시 자동으로 분류되도록 설정해 두면 편리하다.  나는 Gmail을 사용하기 때문에 아래와 같이 사용하고 있다.  1. 프로젝트별 라벨 생성 진행 중인 프로젝트와 유지 관리 대상인 프로젝트, 그 외 종료된 프로젝트로 구분한다.프로젝트명을 하위 라벨로 생성한다. 요런 식으로 👇    2. ‘유사한 메일 필터링’ 필터 생성해당 프로젝트 담당자의 메일 주소 혹은 프로젝트명으로 필터를 생성한다.메일이 검색 기준에 정확히 일치하는 경우 적용할 라벨을 선택하고 필터 생성..

Tech-nics 2024.07.12
웹에 업로드할 이미지의 권장 사양(해상도, 용량, 포맷)

By 홍지호 이미지 업로드에 대해 고객사에 가이드를 드려야 할 때 참고. 특수한 상황이 아니라면 웹에서 이미지를 업로드할 때 권장하는 사양은 다음과 같다.해상도: 72dpi용량: 2MB 이내포맷: jpg  이게 안 지켜지면? 아래와 같은 문제들이 생긴다.이미지 업로드에 자꾸 실패하거나GIF 파일이 재생이 안되거나사이트가 너무 느리게 로드되거나서버 요금이 너무 많이 나오거나 기타 등등 (문제가 생겼는데 원인이 이미지 스펙 때문이라는 것을 고객사가 모르고 있는 경우 바톤이 만든 기능에 문제가 있는 것은 아닌지 하는 불필요한 오해를 받기도 한다. 😔)  이런 문제들은 고용량, 고화질의 이미지가 웹에서 지속적으로 업로드되게 되면 반드시 발생할 수 있으므로, 고객사 사이트에서 이러한 문제가 발생한다면 먼저 고객..

Tech-nics 2024.07.10
영상 촬영할 땐 모바일용 세로 영상도 챙기기

웹사이트 제작과 동시에 영상을 제작해서 사이트에서 보여주려는 고객사를 만나게 되는 경우 참고. 무심코 가로 구도로만 촬영한 후 나중에 '어.. 근데 모바일에선 어떻게 보여주지?' 하는 담당자분들이 이따금 계신다. 그래서 사전 논의 단계에서 확인차 세로영상의 필요성에 대해 안내드리면 좋다. 아마 프로덕션에 이 안내("그리고 저희 모바일에 올릴 세로 구도로도 따로 필요해요.")까지 드리면 영상 제작 견적과 일정도 약간 달라질 것이다.  참고로 '모바일용 = 무조건 세로형'이란 얘긴 아니다. PC 기준의 가로 영상이 모바일에선 대체로 너무 작게 나오니 정방형이든 3:4든 9:16이든 가로 영상보단 내용이 좀 더 잘 들어오고 PC에 비해 피사체가 상대적으로 더 크게 잡아줄 수 있는 가로세로 비율에 대한 계획이 ..

Tech-nics 2024.07.08
웹사이트에서 자동재생 영상을 보여주는 몇 가지 방법들

웹사이트에서 영상이 자동재생되도록 하는 방법이 몇 가지 있다. 그 중 접근성이 낮은 것들만 추렸다.  1. mp4를 재생시키기그냥 mp4 파일을 브라우저에서 재생시켜버리는 방법이다. 단점은 파일 하나는 용량이 1~2메가 정도로 매우 작아야 로딩 문제 없이 영상이 재생된다는 것. 그래서 파일 하나당 러닝타임도 3~5초 정도로 짧을 수 밖에 없다. 예를 들어 우리가 몇 년 전 제작한 오설록 브랜드 스토리를 보면 상단에 짧은 러닝타임의 풀 영상이 여러 개 이어서 돌아가는 것을 볼 수 있다. 용량 문제로 짧은 러닝타임을 감수하면서 대신 파일 여러 개를 올려서 풍성하게 보이도록 한 약간의 트릭이다.   2. 유튜브가장 만만한 방법이다. 하지만 영상에서 유튜브 로고를 지울 수 없다는 점 때문에(있어보이는 말로는 커..

Tech-nics 2024.07.08
초반엔 안 챙겨도 티가 안 나지만 막판에 우리를 고생하게 만드는 것들

by 이채원 웹사이트 제작 프로젝트를 진행하다 보면 생각보다 사소한 것들을 놓쳤을 때 일의 진행 속도와 완성도가 달라진다는 것을 경험으로 깨우치게 되는데, 바로 아래 내용이 그런 케이스다.  1. 최소∙최대 개수 지정하기'n개의 OOO'로 표현될 수 있는 모든 영역에 대해 이 질문을 던져볼 수 있다. 기획, 디자인 단계에서는 내용을 시각적으로 확인하기 위해 특정한 기준 없이 임의의 개수를 정해서 디자인하게 되는 경우가 많은데, 이때 너무 늦지 않은 시점에 웹사이트 운영 시에 발생할 수 있는 변수 등을 고려해서 개수에 대한 기준을 설정해주어야 한다. 예를 들어 최소 몇 개의 콘텐츠가 등록되어야 하는지, 최대 몇 개까지의 이미지만 등록해야 하는지 등의 설정은 디자인의 일관성을 유지하는데 큰 역할을 하고, 로..

Tech-nics 2024.07.08
[카페24] SEO 태그 관리방법(오픈그래프) + 설정시 유의사항

By 최미나 사이트를 런칭할 때, 중요하게 챙겨야 하는 것 중 하나로 SEO 와 오픈그래프 태그 정보가 있다. 잘 만든 웹사이트를 많은 사람이 발견하고 방문할 수 있도록 유도하고, 적절한 소개를 준비하는 일이기 때문이다.  가장 기본적으로는 다음 정보들이 있다.페이지 제목(Title)페이지 설명(Description)파비콘 이미지(favorite+icon)SNS 공유 이미지(og: image) 이렇게 웹사이트 공통 페이지에 대한 정보를 사용하기도 하지만, 꾸준히 콘텐츠를 발행하거나 이벤트를 운영하는 웹사이트에서는 개별적인 페이지 단위로도 검색엔진 노출이 필요할 수 있다. 실제로 적극적으로 마케팅하는 고객사에서는 개별 페이지 단위의 SEO 정보를 설정하고 있고, 관련하여 바톤에서도 검색엔진에 안정적으로 정..

Tech-nics 2024.07.03
47. 메일 작성 도중 실수로 발송하는 일이 잦다면

메일을 쓰는 도중 실수로 발송을 해버리는 일이 잦다면 받는 사람 메일주소를 비워두었다가 보내기 직전에 입력하는 것도 방법이다. 지메일에서 '보내기' 단축키는 '⌘(윈도우에선 Ctrl) + Enter' 로, 타이핑을 빠르게 하다 보면 실수로 누를 가능성이 매우 높은 위치에 있다. 심지어 설정에서 단축키 기능을 꺼도 먹히는 경우도 있다. 그럴 땐 아예 '보내기' 단축키를 레어한 위치로 변경하는 것도 좋다.

스킬 & 팁 2024.01.19
46. 노트북을 살짝 치워보기

일반적으로 누군가와 만난 자리에서는 상대와 나 사이를 가리는 무언가가 적을수록 커뮤니케이션의 밀도가 높아진다.  꼭 필요하지 않다면 노트북 없이 미팅을 해보고, 노트북을 써야 한다면 정면이 아닌 살짝 옆에 두고 미팅을 해보면서 차이를 느껴보자. 그리고 중간중간 타이핑을 해야 한다면 "좀 적으면서 듣겠습니다."라고 굳이 말해보자.

스킬 & 팁 2024.01.08
45. 회의 중 침묵이 흐른다면

회의 중, 종종 특정 주제를 깊이 고민하기 위해 침묵할 때가 있다. 마이크를 쥐고 있는 사람의 침묵이 길어지면 다른 참여자들은 불필요한 걱정이나 상상을 하게 될 수 있다. (내 경우엔 침묵이 대략 5초 정도 넘어갈 때부터 참여자들이 좀 불편해하는 것 같다.) 이럴 땐 속으로 전개해나가던 이야기를 공유하는 것이 좋다. 예를 들면 이런 식이다. ”저는, OOO 한 생각을 해보고 있었는데요, 여러분들의 생각은 어떠세요?” 이렇게 중간에 갈피를 잡아주면 참여자들이 가진 다양한 생각들을 발산할 수 있는 중요한 포인트를 짚어줄 수 있다. 반대로, 참여자의 침묵도 나의 침묵만큼이나 회의 분위기에 영향을 주기도 하는데, 이때는 이렇게 화두를 던져볼 수도 있겠다. ”혹시 지금 고민이 더 필요하시다면, 일단 다음 주제를 ..

스킬 & 팁 2023.12.22
44. 회의 시작법 ① - 아젠다 공유

회의를 진행할 때 참여자의 집중도를 높이려는 시도를 이것저것 해보았는데 회의를 어떻게 시작하느냐에 따라 참여자의 집중도가 달랐다. 회의 스타트를 잘 끊었다는 느낌이 든 날은 참여자들 간 논의도 부드럽게 진행됐고 이슈도 꼼꼼히 챙길 수 있어 알찬 회의로 마무리할 수 있었다. 내가 시도한 방법 중에 가장 간단하면서도 효과적이었던 방법은 회의를 시작하기 전에 미리 아젠다를 정리하여 회의실 화이트보드에 크게 적어두는 것이다. 회의 자리에 들어가기 전에 오늘 회의에서 어떤 사항을 논의해야하는지, 마무리할 때쯤 우리가 서로 합의할 내용이 무엇인지 아젠다를 정리한다. 회의 시작 전에 회의실이 비어있다면 미리 회의실 화이트보드에 적어두고, 회의실이 사용 중이라면 회의를 시작할 때 적어도 무방하다. 모두 볼 수 있는 곳..

스킬 & 팁 2023.12.22
43. 목소리의 방향

열심히 프레젠테이션 준비를 해서 갔는데, 발표 초반 누군가의 "잘 안 들려요~" 한 마디에 멘탈이 흔들린 경험, 다들 있을 것이다. 그래서 PT를 할 때 내 목소리가 주로 어디로 향하게 될지 예상하고, 이를 위한 내 위치를 잘 잡는 것이 필요. 일단은 내가 어떤 스타일로 PT를 할 것인지 먼저 정해야 한다. 1. '우리가 같은 곳을 바라보면서 책을 잘 읽어주는 느낌으로 가겠다'면 나는 주로 이 자리에 앉는다. 내가 스크린을 보면서 말을 하기 때문에 나와 마주본 사람을 포함해서 총 5명에게 내 목소리가 잘 들리게 되고, 내 뒤쪽 두 사람도 나와 가깝기 때문에 목소리가 잘 안 들릴 가능성은 별로 없다. (이때 스크린에서 멀수록 윗사람이 앉아야 한다는 생각을 버려야 함) 약간 아카데믹한 분위기이거나 좀 수줍음..

스킬 & 팁 2023.12.13
42. 레퍼런스는 스펙트럼으로

일반적으로는 고객에게 시각적 단서를 먼저 공유하지 않는 것이 좋지만, 경우에 따라 레퍼런스를 전달하는 것이 도움 될 때가 있다. 이때 고려할 점이 있는데, 그것은 바로 전달하려는 레퍼런스의 개수이다. 방향성과 목표를 합의하는 경우라면 레퍼런스는 여러 개를 전달하는 편이 좋다. 1~3개 정도로 적은 레퍼런스를 보여드릴 경우 각 레퍼런스의 세부적인 표현 요소에 집중하게 되고 자칫 ‘이런 방식으로 우리 웹사이트가 만들어지겠구나’라고 오해하게 만들 수 있다. 뾰족한 표현 요소에 그 방향성이 갇히게 되면 더 뻗어나갈 수 있는 사고를 막게 된다. 반면 그보다 더 많은 수(ex: 4~6개)를 보여드리면 경우 개별 레퍼런스에 집중되는 정도가 낮아지고, 상대방은 디자인 방향성을 구체적인 상이 아닌 일종의 스펙트럼으로 이..

스킬 & 팁 2023.12.12
41. 앉기 좋은 의자

(의자 브랜드 추천 아님 주의..) 사회초년생 때 맡았던 일 중 하나가 아카데미의 운영실무였는데 당시에 느꼈던 신기했던 점들 중 하나는, 어떤 공간에 처음 온 수강생은 누구나 어느 정도는 쭈뼛거릴 수 밖에 없는데 교육 공간에 의자가 어떻게 놓여져 있는지에 따라 그 쭈뼛거림의 정도가 달라진다는 것이었다. 운영자로서 당연히 앞쪽부터 자리를 채우고 싶은 나에겐 중요한 발견이었다. (..중략;;) 하여간 그래서 결론만 얘기하면, 우리 회사로 미팅을 하러 오신 손님이 회의실에 딱 들어섰을 때, 의자가 테이블에서 대략 요 정도 거리를 두고 있으면, 손님이 부담없이 가서 앉기에 딱 쾌적하고 좋다. 의자가 테이블에 너무 딱 붙어 있으면 좀 답답해보이고 잡아 뺄 때 소음이 나기도 하고, 이래저래 선뜻 손이 잘 안 나가는..

스킬 & 팁 2023.12.09
40. 디자인 설명하기 ③ (feat. 말)

일을 할 때에 비유법은 가급적 쓰지 않는 것이 좋지만 디자인을 설명하는 사람과 듣는 사람 모두 디자이너가 아닐 때 적절한 수위에서 비유를 사용하는 것이 도움이 될 때가 있다. 그럼 무엇으로 비유를 하면 좋을까? 우리는 커뮤니케이션으로 먹고 사는 사람들이니 우리에게 가장 익숙한 '말하기'가 좋은 비유의 수단이 될 수 있다고 본다. 그리고 말하기와 듣기는 사회생활을 하는 사람이라면 누구나 하는 것이니 이를 활용해서 적절한 비유를 하면 듣는 사람도 더 잘 설득될 수 있다. 예를 들면 이런 식이다. 섹션과 섹션 사이의 간격을 크게 준 레이아웃에 대해 설명할 때: "이 부분은 호흡을 좀 크게 크게 해주면서 말수도 좀 적게 하는 것이 좋겠다고 봤습니다." 정돈되고 명확한 화면 구성에 대해 이야기할 때: "이 부분은..

스킬 & 팁 2023.11.28
'스테디' 웹사이트 제작기

스테디는 영화, 드라마, 콘서트 등 엔터테인먼트의 첫인상을 만드는 포스터 전문 디자인 스튜디오입니다. ‘헤어질 결심’, ‘재벌집 막내아들’, ‘서울체크인’ 등 매력적인 작품들의 포스터를 꾸준히 제작해오고 있습니다. 2023년 6월, 스테디의 의뢰로 이번 프로젝트를 시작하여 약 3개월의 작업 끝에 스테디 웹사이트(https://teamstdy.com/)가 공개되었습니다. 스테디에서 의뢰한 웹사이트는 작업물 이미지가 주를 이루는, 구조가 단순한 웹사이트였기 때문에 적은 분량의 페이지 내에서 스테디와 스테디의 작업물을 매력적으로 돋보이게 하는 것이 이번 프로젝트의 주요 포인트였습니다. 1. 가장 중요한 것: '스테디'에 집중하기 포스터 디자인을 주로 하는 스튜디오의 포트폴리오 웹사이트라 하면, 사람들이 보통 ..

프로젝트 기록 2023.11.28
39. 디자인 설명하기 ② (feat. 생활인의 시계)

전편의 와디에 이어 '얕고 넓게 짚어주기'계의 전문가를 또 한 분 모셔와봤다. 시계 리뷰어 '생활인'님이다. 아래 영상에서 5분 55초부터 8분 44초까지만 보면 됨. 스니커만큼이나 시계 역시 정해져 있는 요소들 안에서의 디자인 싸움이 치열한 분야다. 디자인과 관련된 일을 잘 하는 데에는 보통 타고난 감각이 미치는 영향이 크다고들 한다. 한편 어떤 대상을 잘 쪼개서 파악하는 일은, 관련된 재능을 타고 나지 않았다 해도 훈련을 통해 꽤 길러질 수 있다. 물론 잘 쪼개는 일로 디자인 결과물의 모든 면을 설명해낼 수는 없지만, 기획의 시선으로 디자인을 분석하고 토론할 수 있다는 것은 분명 큰 즐거움이다. - Watch Anatomy 이미지 출처(link)

스킬 & 팁 2023.11.20
38. 디자인 설명하기 ① (feat. 와디의 신발장)

저연차 기획자들이 가장 어려워하는 일들 중 하나가 고객 앞에서 디자인에 대해 설명하는 것 아닐까. "한번 쭉 보세요~" 할 수도 없고. "진짜 멋있죠?" 할 수도 없고. 뭔가 쓸모 있는 말을 해서 아무리 짧아도 3분에서 5분은 채워야 할 것 같은데 기타 등등.. 유튜버 와디(Wadi)가 스니커의 디자인을 말로 묘사하는 방식이 우리처럼 고난을 겪고 있는 사람들에게 약간의 도움이 될 것 같아서 가져와봤다. 일단 설명은 나중에 하고 영상 먼저 시청을. (1분 35초부터 5분 20초까지만 보면 됨) 이 분이 하는 말을 들어보면, 스니커의 구성 요소별로 하나씩 짚어주면서 설명을 하는 것이 일단 기본으로 깔린다. 흔한 요소든 그렇지 않은 요소든 구분하지 않고 일단 얕고 넓게 쭉 훝어준다는 게 포인트다. (사람마다 ..

스킬 & 팁 2023.11.17